直接用list-style: none无法彻底隐藏summary默认箭头，因其本质是浏览器内置伪元素（如WebKit的::-webkit-details-marker、Firefox的::-moz-summary-bullet），需配合appearance: none及各内核专属伪元素重置（如display: none）才能全覆盖；隐藏后应通过summary::after添加自定义图标并用details[open]切换状态，同时确保无障碍交互完整。
summary标签的默认箭头怎么用CSS隐藏
直接用 list-style 或 appearance 就能干掉那个黑色小三角，但不同浏览器行为不一致，得一起处理。
为什么单纯写 list-style: none 有时没用
因为 <summary> 的箭头不是传统列表项的 list-style，而是浏览器内置的伪元素（比如 WebKit 用 ::marker，Firefox 用 ::-moz-summary-bullet），而且部分浏览器（如旧版 Safari）会忽略 list-style 对 summary 的影响。
- Chrome/Edge（Blink）：
list-style: none+appearance: none可靠 - Safari（WebKit）：必须加
::-webkit-details-marker { display: none } - Firefox：需要
::-moz-summary-bullet { display: none }，且list-style无效
一套兼容写法（推荐直接复制）
把下面这段 CSS 加到你的样式里，覆盖所有主流浏览器：
summary {
list-style: none;
appearance: none;
}
summary::-webkit-details-marker {
display: none;
}
summary::-moz-summary-bullet {
display: none;
}
注意：appearance: none 在部分老版本 Edge（≤18）不支持，但现代项目基本可忽略；如果还要支持 IE（它根本不支持 details/summary），那这整段就不用管了——IE 下根本不会渲染箭头。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
隐藏后怎么加自定义展开图标
去掉默认箭头后，常要补个 SVG 或 Unicode 字符来提示可点击。关键是别忘了状态切换逻辑：
- 用
details[open] summary::after控制“已展开”状态下的图标（比如▼） - 用
summary::after默认显示收起状态图标（比如▶） - 确保
summary::after设了content，否则图标不出现 - 加
pointer-events: none到 ::after 上，避免干扰点击区域
箭头方向、颜色、过渡动画这些都得自己补，浏览器不会帮你做。
真正麻烦的不是隐藏箭头，而是后续交互反馈和无障碍支持——比如用 aria-expanded 同步状态、键盘 Space/Enter 触发展开，这些容易被跳过。
