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

Question

不知道是不是bug，但是好像是。

当你有一个默认的 button 并且当你有一个 :focus 时点击它伪类它似乎没有大纲。

#buttontag:focus {
}

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

不过，当您使用 tab 键时，它会显示大纲。

然而，如果您更改 background-color，则在 button 上单击或使用 tab 键时，它会显示 outline 到它。

#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 片段来查看 大纲 按钮处于 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 如果你强制 button 被聚焦(在调试器上)。

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

所以这里我有一些问题:

• 为什么当您点击默认的 按钮 时，outline 没有显示？
• 为什么 background: #ddd 也没有显示？
• 为什么在使用 tab 时显示 outline 而在单击 button 时不显示(在上述两种情况下)？
• 为什么 button 在他的 CSS 中有 outline 但它不显示它？是错误吗？

Answer 1

可能是错误的。

1. 默认按钮(至少在 Google Chrome 中)使用外观 样式属性:

   button {
       -webkit-appearance: button;
   } 
   

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

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

   alert('我是标准按钮')

   当您创建了一个包含以下内容的 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题，我已经拿到大纲了，恐怕无法复现。

将在研究后更新答案。干杯! :)