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

Question

我不知道它是不是一个bug,但似乎是.

如果您有一个默认值,button并且在有:focus伪类时单击它,它似乎没有outline.

#buttontag:focus {
}

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

但它会显示outline您何时使用tab密钥.

然而,如果您更改它,它会显示outline单击或使用tab键时的两者.buttonbackground-color

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

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

但它并不适用于所有类型的background-color.例如,它不起作用background-color: #ddd.在这种情况下,它仅在您使用tab密钥时显示.

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

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

这是一个截图,当button焦点,没有任何变化.

我知道它的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);

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

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

我知道这rgb(221, 221, 221)与#DDDDDD十六进制相同,并且与之相同#ddd.我不知道,如果它必须是一些关于两种颜色之间的对比度相关的(没有对比,因为它们是相同的颜色)和outline但它是非常奇怪的是,在此background-color将outline不会出现.

越来越奇怪了

如果您检查默认值button并强制它被聚焦(我正在尝试Google Chrome调试器),它有一个outline并在按钮上显示它.它是默认值outline,显示在buttons另一个的其余部分中background-color.

:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

而且我还想知道它是否与强制button处于焦点状态有关,所以我创建了一个Javascript片段来查看outline按钮的focus状态.

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

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

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

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

它检索默认值outline,但不显示它.它似乎只显示outline你强制button聚焦(在调试器上).

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

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

• 单击时为什么outline不显示默认值button？
• 为什么background: #ddd还没有显示呢？
• 为什么outline在您使用tab时显示,而不是在您点击时button(在上述两种情况下)？
• 为什么button有outline他的,CSS但它不显示它？这是一个错误吗？

Answer 1

可能是错的。

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

   button {
       -webkit-appearance: button;
   } 
   

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

   检查标准操作系统按钮外观的非常简单的方法：

   alert('I am standard button')

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

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

   如果您要创建一种样式：

   button { -webkit-appearance: initial; }
   

   您将获得带有轮廓的默认浏览器按钮。

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

   background-color: buttonface;
   

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

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

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