css - 如何在不删除 Firefox/IE 轮廓焦点的情况下自定义输入边框

Question

重要:我不想为可访问性 (a11y) 目的自定义/删除焦点样式。它基本上是 impossible to mimic all the different focus styles of browsers/operating systems

自定义输入/文本区域的外观会在元素获得焦点时移除轮廓样式。它还添加了奇怪的边框等。

这种行为背后的原因是什么，在我看来它破坏了可访问性？如何在修改背景、边框颜色等简单 CSS 属性时不覆盖焦点样式？

我在 Firefox Mac 和 IE 11(Chrome 运行良好)上进行了测试，也许其他浏览器的行为相同。 这是一个在浏览器中尝试的 Codepen:https://codepen.io/lbineau/pen/dLgwoo

<label for="customized-input">Customized input</label>
<input id="customized-input" type="text" />

<label for="native-input">Native input</label>
<input id="native-input" type="text" />

预期结果:即使自定义输入边框，也应显示默认轮廓。

实际结果:输入框聚焦时不显示轮廓。

Answer 1

我不知道这背后的原因。

但是你可以用下面的代码覆盖它:

#customized-input:-moz-focusring {
  outline: Highlight solid 1px; 
}