从 Chrome 中打开的 <details> 元素中删除蓝色边框？答案

【问题标题】：Remove blue border from open <details> element in Chrome?从 Chrome 中打开的 <details> 元素中删除蓝色边框？
【发布时间】：2014-02-01 05:51:28
【问题描述】：

我正在升级我的网站以使用新的 HTML5 details 元素以获得更好的可访问性。

一切正常，但不幸的是，当我点击打开元素时，Chrome 应用了一个难看的蓝色边框：

有什么办法可以阻止 Chrome 这样做吗？我看不到任何明确的 CSS 样式被应用，所以我不知道如何摆脱它。

JSFiddle代码在这里演示问题：http://jsfiddle.net/6x2Kc/

【问题讨论】：

【解决方案1】：

使用outline:none;

例如，

summary{
  outline:none;
}

希望这会有所帮助。

【讨论】：

实际上在 all HTML 元素上设置 outline:none 就像@SurjithSM 的评论中的那样是一个非常糟糕的做法，因为使用标签按钮通过控件进行标签的用户不会看到重点是什么。残疾人在使用这样的网站时也会遇到问题。
即使只是这个答案也不是很好的可访问性，用户在浏览页面后如何知道摘要是否集中？

【解决方案2】：

使用大纲：0；

summary:focus {
     outline: 0;
}

【讨论】：