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

【问题标题】：Remove focus rectangle of details tag (outline:none not working)删除细节标签的焦点矩形（大纲：没有不起作用）
【发布时间】：2018-05-16 00:27:44
【问题描述】：

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

details:focus { outline: none; }

但这没有用。我曾想过将outline: none 与details[open] 选择器放在一起，但它也不起作用。如果我尝试使用按钮，它会起作用...有什么帮助吗？

【问题讨论】：

标签： html css tags

【解决方案1】：

我建议使用<summary> 标记重构您的代码。 <summary> 标签定义了元素的可见标题。可以点击标题查看/隐藏详情。

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

summary {
  outline:none;
}

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

【讨论】：

好答案。根据此处的文档：html.spec.whatwg.org/multipage/…，如果没有子摘要，用户代理将提供它自己的摘要。但是，您没有对其进行样式设置的访问权限，因此如果您的目标是对其进行自定义，最好在这种情况下添加一个。
没想到在摘要中添加大纲：无...确实有效！