Question

所以我注意到如果我为（例如）一个按钮创建自己的焦点样式，那么在我用鼠标点击按钮后样式就会显示出来。但是，当我单击一个具有默认焦点样式的按钮时，没有轮廓。

但是，您可以完美地按下按钮，这两个按钮都会在聚焦时显示轮廓。

我很好奇为什么默认的焦点样式和我自己的焦点样式不能以相同的方式起作用。 为什么两者都出现在键盘导航中，但鼠标单击时只显示其中一个？

请尝试在这些按钮上单击并使用键盘导航：

button {
  padding: .5rem;
  margin: 2rem;
}

.my-button:focus {
  outline: 3px solid red;
}

<button type="button">
  This button has default focus styling
</button>

<button type="button" class="my-button">
  This button has my own focus styling
</button>

PS：我对任何javascript hacky解决方案都不感兴趣，或者以任何方式删除焦点样式。我只想了解网络为何如此运作。

Answer 1

默认情况下，outline属性是键盘用户的辅助功能工具。使用鼠标，光标是您的视觉辅助，以了解哪个元素具有焦点。在没有轮廓可见的元素的屏幕上进行切换会导致用户忘记他所选择的位置（这就是为什么你应该完全never remove the outline）。

Answer 2

Chrome使用outline-style: auto

This is defined by CSS specs如下：

auto值允许用户代理呈现自定义大纲样式，通常是平台的用户界面默认样式，或者可能比CSS中详细描述的样式更丰富的样式，例如圆形边缘轮廓，半透明外部像素看起来发光。因此，此规范未定义在呈现auto样式轮廓时如何合并或使用轮廓颜色（如果有的话）。用户代理可以将auto视为solid。

这意味着并非所有浏览器都认为solid和auto是相同的。

您可以使用auto值而不是solid重现与Chrome相同的行为：

button {
  padding: .5rem;
  margin: 2rem;
}

.my-button:focus {
  outline: 3px auto red;
}

<button type="button">
  This button has default focus styling
</button>

<button type="button" class="my-button">
  This button has my own focus styling
</button>

为什么鼠标单击时出现手动对焦样式，而默认对焦样式不出现？

2 个答案: