在不同的瀏覽器中顯示的顏色不同

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