有没有一种方法可以更改 -webkit-focus-ring-color？

Question

我怎样改变-webkit-focus-ring-color的颜色? Chrome浏览器默认是淡蓝色，和我的CSS不搭配，我想改成其他16进制颜色但保留其他样式（模糊边缘、宽度）。

另外，这么做会有什么重要的原因吗？谢谢！

- YPCrumble

Answer 1

以下 CSS 适用于 Chrome（只更改轮廓的颜色）：

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

如果你想要在各种浏览器中实现一致的 CSS 样式，最好编写自己的完整样式表，并且在此之前可能还需要添加一个 CSS 重置（CSS reset）。

如果你满意浏览器的焦点样式，只是想改变颜色，那么上面的代码就足够了。你可能还想进行一些快速研究，查看其他浏览器的默认焦点样式是什么（也许有些使用边框？），并将这些颜色也设置为相应的值。

如果你想在所有浏览器中模拟 Chrome 的样式，请尝试使用以下代码（来自 Chrome 用户代理样式表）：

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

- DylanYoung

---

最终我在我的网站上让它工作了，但是我不得不包含 !important。你能在不使用这个标志的情况下让它工作吗？ - YPCrumble

在OSx中，是的，在Chrome v62中可以。可能是之前的Chrome版本直接在元素上设置焦点样式，而不是通过用户代理样式表进行设置？这肯定会影响选择器的特异性，并需要使用!important。 - DylanYoung

outline 简写属性的功能类似于 border，如果你覆盖了简写属性，你需要考虑到你正在覆盖的所有属性。你不能只挑选颜色。outline: red auto 5px 是有效的，而 outline: red 不起作用。 - serraosays

Answer 2

http://jsfiddle.net/jmysiak/fpqp1zv3/2/

input {
  border: 1px solid #c4c4c4;
  width: 200px;
  height: 20px;
  font-size: 16px;
  padding: 4px;
  border-radius: 2px;
    -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
  transition: all ease-in-out 0.15s;
    -webkit-transition: all ease-in-out 0.15s;
      -o-transition: all ease-in-out 0.15s;}

input:focus { 
  outline: none;
  border-color: #df9eed;
  box-shadow: 0 0 10px #df9eed;}

- jmysiak

---

这不符合提问者的要求 :( 你用边框替换了轮廓，这意味着聚焦现在会改变你页面的布局：边框占用空间，而轮廓则不会。 - DylanYoung

@DylanYoung - 如果你没有使用box-sizing: border-box;，边框会占用空间。看看吧，这是所有现代人编写CSS的方式。 - sheriffderek

据我理解，这只影响高度和宽度的计算，并且通常非常有用。如果我没记错的话，边框仍会推动元素以避免重叠。如果我错了，请纠正我！在这种情况下（固定大小的输入），使用border-box将在添加边框时压缩输入内容。使用content-box（固定大小的输入）将推动周围的元素（如果没有足够的空间容纳边框）。 - DylanYoung

Answer 3

是的，你只需要对它进行样式设置。这是一个轮廓。但是您应该放置一些看起来很酷但仍然表示焦点的东西，以便使用它的人仍然可以看到他们在页面上的位置。除了标准鼠标之外，他们可能会得到其他设备的帮助。 这里有一个代码演示

HTML

<button class="thing">Something</button>

或者

<input class="thing" type="text" />

CSS

.thing {
    border: 1px solid red;
}

.thing:focus {
    outline: 0;    
    border: 1px solid blue;
}

- sheriffderek

---

你提供的代码根本没有实现 OP 所要求的功能：“我想将它更改为另一个颜色十六进制，但保留其余样式”。 - DylanYoung