怎么在HTML网页中用CSS去除details标签的默认高亮边框-html教程-PHP中文网

必须针对summary写summary:focus{outline:none}，并清除firefox的summary::-moz-focus-inner{border:0}和safari的-webkit-tap-highlight-color，同时提供box-shadow等替代焦点反馈以满足可访问性要求。

怎么在html网页中用css去除details标签的默认高亮边框

details 标签聚焦时的蓝色高亮边框怎么去掉

直接写 details:focus { outline: none; } 无效——details 元素本身不接受焦点，真正触发高亮的是内部的 summary。你看到的“蓝色边框”其实是 summary:focus 的默认 outline。

必须针对 summary 写样式：summary:focus { outline: none; }
Firefox 还额外加了一层 summary::-moz-focus-inner 边框，得单独清掉：summary::-moz-focus-inner { border: 0; }
移动端 Safari 点击时可能有半透明点击高亮（非 outline），需加：summary { -webkit-tap-highlight-color: transparent; }
别漏掉键盘用户：去掉 outline 后，务必提供替代焦点指示，比如 summary:focus { background-color: #f5f5f5; box-shadow: 0 0 0 2px #007bff; }

为什么 summary 去了 outline 还有残留虚线

常见于 Firefox —— 它对 summary 的焦点态有两层渲染：一是标准 outline，二是私有伪元素 ::-moz-focus-inner 插入的 border。只清 outline 不够，这个 border 会撑开内边距、留下视觉错觉。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

summary::-moz-focus-inner 是 Firefox 特有，且默认带 border: 1px dotted ButtonText
必须显式设为 border: 0，不能只靠 outline: none
该伪元素还可能影响垂直对齐，顺手加 padding: 0; margin: 0; 更稳妥

details + summary 的可访问性边界在哪

移除高亮边框本身不破坏可访问性，但移除后没补任何焦点反馈，就会让键盘用户完全迷失当前聚焦位置。这不是细节问题，是 WCAG 2.4.7（焦点可见性）的硬性要求。

details 和 summary 天然支持屏幕阅读器（自动播报“展开/收起”状态），这点千万别用 display: none 或 visibility: hidden 破坏
自定义焦点样式时，避免仅靠颜色变化（如只改背景色），要叠加形状或阴影等视觉维度
如果项目启用了 prefers-reduced-motion，box-shadow 动画应降级为静态边框，否则可能触发眩晕

真正难的不是“怎么去掉”，而是“去掉之后，谁来告诉用户现在焦点在哪”。这个交接点，最容易被跳过。