css - 有没有办法改变-webkit-focus-ring-color？

Question

如何更改-webkit-focus-ring-color的颜色？ Chrome 的浅蓝色与我的 CSS 冲突，我想将其更改为另一种十六进制颜色，但保持其余样式(褪色边缘、宽度)不变。

此外，这是一个坏主意的重要原因吗？谢谢？

Answer 1

Chrome 应该使用以下 CSS(仅更改轮廓的颜色):

.thing:focus {
  outline-color: [MY_COLOUR];
}

如果你想要跨浏览器的 css 一致，你最好编写自己的完整样式，并且可能在此之前包括 css 重置。

如果您对浏览器焦点样式感到满意并且只想更改颜色，那么上面的方法应该可以。您可能还想做一些快速研究，看看其他浏览器的默认焦点样式是什么(也许有些使用边框？)并设置这些颜色。

如果你想在所有浏览器中模拟 chrome 样式，试试这个(来自 chrome 用户代理样式表):

.thing:focus {
  outline: [My_COLOUR] auto 5px;
}