删除细节标签的焦点矩形（大纲：无不起作用）

Question

我正在使用

<details>

标签进行一些实验。由于当我在 Google Chrome 中打开它时有一个烦人的焦点矩形，我尝试通过添加

来删除它

details:focus {
  outline: none;
}

但这没有用。我想过将

outline: none

与

details[open]

选择器放在一起，但它也不起作用。如果我尝试使用按钮，它就会起作用......有什么帮助吗？

Answer 1

我建议使用

<summary>

标签重构您的代码。

<summary>

标签定义元素的可见标题。单击标题可以查看/隐藏详细信息。

<details>  
    <summary>Details summary</summary>  
    <p>Text here</p>
</details>

summary {
  outline:none;
}

这在视觉上会达到相同的结果。 这是一个工作示例：https://jsfiddle.net/katerynas/zhcfk5ha/1/

Answer 2

我是一名无障碍工程师。根据 WCAG，需要使用聚焦环，以便有视力的键盘用户在浏览页面时知道焦点当前所在的位置。尽管您可以在鼠标悬停时将其移除，但不应抑制聚焦环。只要满足 WCAG 颜色对比度要求，您可以随意设计对焦环。