如何移除details标签的焦点矩形？outline:none设置不生效

哈哈，这个坑我踩过！Chrome对<details>标签的焦点处理有点“特殊”——你直接给details:focus加outline: none没效果，是因为焦点实际上落在了内部的<summary>元素上，而不是<details>容器本身。这就解释了为什么同样的样式用在<button>上没问题（因为button是单一的可交互元素）。

给你几个可行的解决方案：

方案1：直接针对<summary>设置样式 #

这是最直接的办法，把样式加在<summary>上就可以生效：

summary:focus {
  outline: none;
}

方案2：兼顾可访问性的优化方案 #

直接去掉outline会影响键盘导航用户的体验（无障碍设计很重要！），推荐用:focus-visible伪类来优化——只有当用户用键盘导航时才显示焦点样式，鼠标点击时自动隐藏：

summary:focus-visible {
  outline: none;
  /* 如果你想自定义焦点样式，也可以换成这个，比如：
  box-shadow: 0 0 0 2px #4285f4;
  */
}

方案3：覆盖所有可能的状态 #

如果上面的方法还是没效果，可以试试明确指定<details>展开状态下的<summary>样式：

details summary:focus,
details[open] summary:focus {
  outline: none;
}

原理很简单：<details>本身是容器元素，真正接收用户交互（点击、键盘聚焦）的是它的子元素<summary>，所以你的样式必须作用在<summary>上才能生效。

内容的提问来源于stack exchange，提问作者Thurinum