删除细节标记的焦点矩形（轮廓：无效）

Question

我正在使用<details>标签进行一些实验。由于当我在谷歌浏览器中打开它时有一个烦人的焦点矩形，我试图通过添加

删除它

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/