清除原生箭头需用list-style: none作用于summary元素，并配合padding-inline-start: 0；summary::marker可精准控制箭头，但safari 15.4前不支持，故不能单独依赖。
直接用 list-style: none 清除原生箭头
这是最基础也最关键的一步。所有现代浏览器（Chrome 115+、Firefox 117+、Safari 16.4+）都把 summary 的默认箭头实现为列表标记（marker），本质是 list-style 的一部分。不加这句，后续任何自定义都会和原生箭头叠在一起或错位。
-
list-style: none必须作用在summary元素上，不是details - 顺带清掉可能残留的内边距：
padding-inline-start: 0（比padding-left: 0更健壮，适配 RTL 文本） - 别用
appearance: none—— Safari 对summary完全不认这个属性
summary::marker 是精准控制的关键，但注意兼容性
::marker 是专为控制 summary 前那个小符号设计的伪元素，但它在 Safari 15.4 之前完全无效。如果你项目需支持 iOS 16 之前的设备（比如部分企业内网环境），不能只依赖它。
- 清除原生箭头：
summary::marker { content: ""; } - 想换图标？直接写：
summary::marker { content: "▶"; margin-right: 8px; } - 旧版 Safari（::marker，所以得配合
::after做降级（见下一条）
用 summary::after 实现兼容性更强的自定义图标
当你要确保 iOS 15 或更早版本也能显示一致图标时，::after 是更稳妥的选择。它不依赖 ::marker，且可完整控制位置、颜色、动画。
- 先确保
summary是position: relative，方便::after绝对定位 - 图标右对齐常见写法：
summary::after { content: "▶"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } - 展开时旋转：
details[open] summary::after { transform: translateY(-50%) rotate(90deg); } - 避免用
margin-right动画——会触发重排；只用transform+transition
千万别碰 display 和 float
给 summary 设 display: block 或 float: left 是高频翻车点，后果直接且隐蔽：
- 键盘用户按
Space或Enter失效 ——summary不再被识别为可切换按钮 - 屏幕阅读器读不出 “click to toggle”，语义断裂
- Safari 在非首个子元素（比如前面有空格或注释）时可能完全忽略点击
- 真要布局对齐？用外层
div包住details，然后用flex或grid控制
隐藏箭头本身很简单，但真正难的是在去掉视觉提示后，仍让交互意图清晰、语义完整、键盘和屏幕阅读器可用。哪怕你只加了 cursor: pointer，也比什么都不做强得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
