Question

如何更改-webkit-focus-ring-color的颜色？ Chrome有一个浅蓝色与我的CSS冲突，我想把它改成另一个颜色的十六进制，但保持其余的样式（褪色的边缘，宽度）相同。

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

Answer 1

以下css应该适用于Chrome（仅更改大纲的颜色）：

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

如果您希望跨浏览器保持一致的CSS，那么您最好先编写自己的完整样式，并在此之前进行css重置。

如果您对浏览器焦点样式感到满意并且只想更改颜色，则上述情况应该如此。您可能还想进行一些快速研究，以查看其他浏览器的默认焦点样式（可能有些使用边框？）并设置这些颜色。

如果要在所有浏览器中模拟chrome样式，请尝试此操作（来自chrome用户代理样式表）：

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

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;}

Answer 3

是。你只是设计风格。这是一个大纲。但是你应该把一些很酷的东西看作仍然表示焦点的东西，这样使用它的人仍然可以看到它们在页面上的位置。除标准鼠标外，其他设备可能会辅助它们。

a fiddle

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;
}

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

3 个答案:

HTML

CSS