为什么默认按钮会覆盖焦点事件的轮廓？

Question

我不知道它是不是一个bug，但似乎是。

如果您有默认button，并且在有:focus伪类时单击它，则它似乎没有outline。

＆＃13;

＆＃13;

#buttontag:focus {
}

＆＃13;

<button id="buttontag" type="button">Focus me</button>

＆＃13;

＆＃13;

＆＃13;

但是，当您使用 tab 键时，它会显示outline。

然而，如果您将outline更改为button，则会在background-color点击或使用标签键时显示#buttontag:focus { background-color: #dde; }。

＆＃13;

＆＃13;

<button id="buttontag" type="button">Focus me</button>

＆＃13;

background-color

＆＃13;

＆＃13;

＆＃13;

但它并不适用于所有类型的background-color: #ddd。例如，它不适用于#buttontag:focus { background-color: #ddd; }。在这种情况下，它仅在您使用 tab 键时显示。

＆＃13;

＆＃13;

<button id="buttontag" type="button">Focus me</button>

＆＃13;

button

＆＃13;

＆＃13;

＆＃13;

这里是background-color: #ddd聚焦时的屏幕截图，没有任何变化。

我知道button与var buttontag = document.getElementById('buttontag'); buttontag.onfocus = function(){ var border = window.getComputedStyle(buttontag).getPropertyValue("border"); alert(border); } var border = window.getComputedStyle(buttontag).getPropertyValue("border"); alert(border);的默认边框颜色相同（焦点或未聚焦）。我创建了以下代码以确保它。

＆＃13;

＆＃13;

#buttontag:focus {
  background-color: #ddd;
}

＆＃13;

<button id="buttontag" type="button">Focus me</button>

＆＃13;

rgb(221, 221, 221)

＆＃13;

＆＃13;

＆＃13;

我知道#DDDDDD与十六进制的#ddd相同，与outline相同。我不知道它是否必须与两种颜色之间的对比有关（没有对比，因为它们是相同的颜色）和background-color但是在outline button中我很奇怪1}}没有出现。

越来越奇怪

如果你检查默认的Google Chrome并强制它被关注（我正在试用outline调试器），它会有一个outline并在按钮上显示它。默认buttons在background-color的其余部分中显示为另一个:focus { outline: -webkit-focus-ring-color auto 5px; } 。

button

我还想知道这是否与迫使Javascript处于焦点状态有关，因此我创建了一个outline代码段，以查看该按钮在focus中的含义{ {1}}州。

＆＃13;

＆＃13;

var buttonFocus = document.getElementById('buttontag');

buttonFocus.onfocus = function(){
  var outline = window.getComputedStyle(buttonFocus).getPropertyValue("outline");
  alert(outline);
}

＆＃13;

#buttontag:focus {
  background-color: #ddd;
}

＆＃13;

<button id="buttontag" type="button">Focus me</button>

＆＃13;

＆＃13;

＆＃13;

它检索默认的outline，但不显示它。如果强制outline被强调（在调试器上），它似乎只显示button。

我搜索了官方文档，但找不到与默认buttons或特定background-color的特殊行为相关的任何内容。

所以我在这里有一些问题：

• 点击默认outline时，为什么button没有显示？{/ li>
• 为什么background: #ddd也没有显示？
• 为什么在使用标签时显示outline，而不是在点击button时（在上述两种情况下）？
• 为什么button在outline中有CSS，但它没有显示？这是一个错误吗？

Answer 1

可能是错的。

1. 默认按钮（至少在Google Chrome中）使用appearance style属性：

   button {
       -webkit-appearance: button;
   } 
   

   appearance属性允许您使元素看起来像 操作系统中的标准用户界面元素。谈到OS X，标准界面按钮没有轮廓 默认情况下。

   检查标准os按钮的外观非常简单：

   alert('I am standard button')

   当您创建了包含的button:focus伪类时 background或border规则（示例＃2），您已覆盖了。{ 按钮+您的默认浏览器样式的标准外观 规则。

   在示例＃1中，button:focus为空，显然是 只是被浏览器忽略，因此应用了os界面风格。

   如果要创建样式：

   button { -webkit-appearance: initial; }
   

   您将获得具有大纲的默认浏览器按钮。

2. Chrome按钮的默认样式有一条规则：

   background-color: buttonface;
   

   Safari和Google Chrome支持自定义颜色名称 引用当前使用的用户界面元素颜色。 可能是这种情况，系统中buttonface为'#dddddd'。有趣的是，我可以在OS X Chrome中看到蓝色轮廓。

对于问题3和4，我恐怕无法复制它，因为我得到了大纲。

经过一番研究后会更新答案。干杯! :)

Answer 2

webkit Chrome和Safari的行为方式不同，因为它们不会在点击事件中触发:focus，而是在tab键盘事件上触发。

存在:focus行为，尤其是button元素。

因此，您可能需要在tabindex元素上添加button属性，以便让浏览器知道此元素可以获得焦点。

tabindex="0"  

由于没有tabindex属性，浏览器会将焦点标志视为false，因此没有:focus。

参见W3C规范：

https://drafts.csswg.org/selectors-3/#the-user-action-pseudo-classes-hover-act

  

可能存在哪些元素可以成为文档语言或实现特定限制：活动或获取：焦点。

另请参阅以下有关重点浏览的内容

https://html.spec.whatwg.org/multipage/interaction.html#currently-focused-area-of-a-top-level-browsing-context

  

如果省略该属性或解析该值将返回错误。

     

用户代理应遵循平台约定来确定是否设置了元素的tabindex焦点标志，如果是，则使用顺序焦点是否可以到达元素和任何具有该元素作为其DOM锚点的可聚焦区域导航，如果是这样，它们在顺序焦点导航顺序中的相对位置是什么。

     

Modulo平台约定，建议对于以下元素，设置tabindex焦点标志：

     

  

• 具有href属性的元素

  

• 链接具有href属性的元素

  

• 按钮元素

  

您还可以看到此相关的StackOverflow问题：

css focus not working in safari and chrome

Answer 3

按钮具有每个浏览器定义的默认样式。它可能（通常是）与浏览器不同。但我们可以覆盖默认值以满足我们的需求。

为什么点击它时轮廓没有显示在默认按钮上？

单击时按钮不会进入对焦状态。它进入活动状态。

为什么有背景：#ddd也没有显示？

它确实在我的浏览器中显示，但仅在焦点时显示。我的例子是你使用#ddd和#dde，这两个颜色与默认的灰色非常相似，但是一旦我改变了值，我就能看出差异。

为什么使用标签时会显示轮廓而不是单击按钮时显示轮廓（在上述两种情况下）？

焦点状态旨在允许用户按Enter / Return键激活按钮。但是，按钮在单击时不会进入焦点状态

为什么按钮在他的CSS中有轮廓，但它没有显示？这是一个错误吗？

这不是一个错误。它只在焦点状态下显示，可以强制通过代码检查器，通过javascript或通过表格元素进行Tab键。我用自己的例子声明：     大纲：2px solid #ccc; 当尝试使视觉障碍者的屏幕阅读器可访问应用程序/网站时，焦点状态非常有用。它允许我们添加更多可以在这些情况下触发的功能，并在查看时无法通过页面引导用户。

Answer 4

这只是一个推测，因为我没有资源调试Webcore本身。

是的，我相信这种行为是一个错误。我不认为Webkit打算将按钮集中在点击上，而只是在用tab选择时设置焦点状态。现在的问题是，当你改变背景时，它确实会集中注意力。这可能与webcore的setStyle()有关，它会覆盖style.appearance（用于检查focus-ring-color支持检查）。

现在为什么在执行background-color: #DDD时无效？

如您所述，这与原始颜色相同。它们可能是相同类型的颜色对象并且是相同的。
我相信如果没有为样式添加任何新东西，Webkit就不会设置样式。

您可以通过添加一行来进行测试，该行是渲染按钮的默认样式所没有的：

button:focus {
  background-color: #DDD;
  border: 1px solid transparent;
}

<button>
  Focus me!
</button>

我不确定最后一个问题，但它可能有关于javascript，DOM，初始w3核心和webkit核心是handeld的顺序。但是，当警报处于活动状态时，似乎outline值中不存在computed值。这可能表明某些内容（webCore）确实覆盖（或者只是不使用）默认值/行为。

我建议 report this as a bug ，他们更有可能给你一个明确的答案。

非常有趣的东西，祝你好运！

Answer 5

默认浏览器行为是仅在焦点上显示轮廓（使用tab f.e.），而不是单击。每个浏览器也可能具有默认的轮廓颜色和宽度。 为避免任何有趣的行为，您可以覆盖大纲，并将其添加到单击中：

#buttontag:focus, #buttontag:active {
  outline: #ddd solid 2px;
}