默认箭头由浏览器UA样式实现，并非HTML标准要求，各浏览器位置不一致；统一控制需用list-style: none清除列表样式、padding-left: 0消除残留空白，并用summary::marker{content:""}显式清空标记。
summary 默认箭头是 UA 样式，不是 HTML 标准的一部分
浏览器（Chrome/Firefox/Safari）对 <summary> 渲染的三角箭头，全部来自用户代理（UA）CSS，不是 HTML 规范要求的。这意味着：它可被覆盖，但各浏览器默认行为不一致——比如 Safari 的箭头在右侧、Firefox 在左侧、Edge 有时不显示。想统一控制，必须主动重置。
用 list-style 和 padding 彻底移除默认箭头
最可靠的方法是清除 <summary> 的列表样式，并手动处理内边距以避免文字错位：
details summary {
list-style: none;
padding-left: 0;
}
details summary::marker {
content: "";
}-
list-style: none是关键，它干掉 Firefox/Chrome 的内置 marker（箭头本质是 marker） -
padding-left: 0防止 Chrome 在移除 marker 后仍保留左侧空白（它的默认padding-inline-start会残留） -
summary::marker是现代写法，content: ""显式清空 marker，对 Safari 15.4+ 和新版 Chrome 更稳妥 - 不要只用
appearance: none—— 它在 Safari 中对<summary>无效
自定义箭头时，优先用 ::marker 而非 background-image
如果需要替换成自己的图标（如「▶」或 SVG），直接操作 ::marker 最干净：
details summary::marker {
content: "▶";
color: #666;
margin-right: 8px;
}
/* 或用 SVG 字符 */
details summary::marker {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 9l4-4 4 4z' fill='%23666'/%3E%3C/svg%3E");
}-
::marker天然居中对齐、随文字大小缩放，比background-image+padding手动调位置更稳定 - 避免用
float或position: absolute去“盖”原生箭头——容易破坏可访问性（屏幕阅读器可能读两次） - IE 不支持
::marker，但 IE 也不支持<details>/<summary>，所以无需降级
隐藏箭头后，务必确保交互反馈依然清晰
移除视觉指示物后，用户可能无法判断哪里可点击。这不是样式问题，而是 UX 缺陷：
立即学习“前端免费学习笔记（深入）”；
- 给
summary加cursor: pointer，这是最低成本的提示 - 用
:hover或:focus改变背景色/下划线，强化可点感 - 别依赖颜色变化作为唯一反馈——色觉障碍用户可能完全看不到
- 如果整个
details区域有复杂交互（比如嵌套表单），建议保留一个极简箭头（哪怕只是»），比彻底“隐形”更安全
细节在于：箭头是否显示，最终取决于你是否愿意为可访问性和跨浏览器一致性多写一行 list-style: none 和一个 ::marker 声明。漏掉任一环节，都可能在某个浏览器里突然冒出一个你不认识的三角。
