javascript - 颜色在不同浏览器中显示不同

Question

我有一个 #c7e296 颜色的输入文本框，当处于焦点时，颜色会更改为 #668933 但是当我在不同的浏览器中测试时，它们会显示一些不同的颜色专注。

谁能解释一下为什么？

下面是我的代码，

.after input[type="text"]:focus {
    border: 2px solid   #668933; 
}

.before input[type="text"] {
    border: 2px solid #c7e296;
    color: #000000;
    font-size: 1em;
}

Answer 1

一些浏览器(尤其是 Safari)会自己突出显示聚焦的输入字段。因此，如果您设置边框，并且浏览器会突出显示，颜色可能会混合在一起。

您可以通过将 outline-width: 0 放在您的 :focus 规则上来禁用它:

.after input[type="text"]:focus {
  border: 2px solid   #668933; 
  outline-width: 0;
}