HTML 中 <summary> 标签的原生三角箭头无法直接删除，需通过 list-style: none 和 padding-inline-start: 0 隐藏，并用 ::marker 或 ::before 替换为自定义图标，支持动态切换展开/收起状态。
HTML 中 <summary> 标签自带的原生三角箭头（通常为向下或向右的小三角）无法通过 CSS 直接“删除”，但可通过重置默认样式 + 自定义图标实现隐藏与替换。
1. 隐藏原生箭头的关键：重置 list-style 和 padding
<summary> 在多数浏览器中被渲染为带 list-style 的行内元素（类似 <li>），其箭头本质是 list-style 生成的标记。要隐藏它，需同时处理以下两点：
- 设置
list-style: none—— 移除默认符号 - 清除
padding-inline-start（或旧版padding-left）—— 因为浏览器常在此处预留箭头空间，不清理会导致内容缩进异常
2. 替换为自定义图标：用 ::marker 或伪元素
推荐使用 ::marker 伪元素（现代浏览器支持良好），它专用于控制 summary 前置标记：
summary {
list-style: none;
padding-inline-start: 0;
}
summary::marker {
content: "▶"; /* 可替换为 ▼、⊞、▼ 等 Unicode 图标 */
font-size: 0.9em;
margin-inline-end: 6px;
}若需兼容较老浏览器（如 Safari 11.1 以下），可用 ::before 模拟：
立即学习“前端免费学习笔记（深入）”；
summary {
list-style: none;
padding-inline-start: 0;
position: relative;
}
summary::before {
content: "▶";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
margin-right: 6px;
}3. 动态切换图标（展开/收起状态）
利用 <details> 的 open 属性，配合属性选择器动态改变箭头方向：
summary::marker {
content: "▶";
}
details[open] > summary::marker {
content: "▼";
}也可用 Unicode 或 SVG 背景图实现更精细控制，例如：
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 fill='%23666' d='M3 4l3 3 3-3z'/%3E%3C/svg%3E");
}4. 注意事项与兼容性
部分旧版 Safari 对 ::marker 支持有限，且 <summary> 默认有 cursor: pointer 和 outline，建议一并优化：
- 添加
cursor: pointer确保交互反馈明确 - 用
outline: none配合focus-visible保证可访问性 - 避免在
summary内嵌套交互元素（如按钮），可能引发焦点和语义混乱
