在不同的浏览器中显示的颜色不同

Question

我有一个#c7e296颜色的输入文本框，当焦点对#668933颜色变为#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）本身会在突出显示的输入字段周围突出显示。 因此，如果设置了边框， 并且浏览器将其突出显示，则颜色可能会一起渗出。

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

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