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

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; } 规则上来禁用该功能：

{{1}}