為什么此文本輸入的輪廓在Chrome和Firefox中的顯示方式不同？

Question

我已經寫了這個小提琴來演示這個問題。 我有一個簡單的表格。 當文本框獲得焦點時，我所希望發生的就是更改文本框的背景。 在Firefox 9中，此功能正常。 在Chrome中，似乎錯誤地更改了輸入的輪廓。 即使我明確設置它。 Chrome會對其進行更改，並在輸入焦點周圍放置黑色輪廓。

這是JS小提琴： http : //jsfiddle.net/H3qay/

任何幫助，將不勝感激。

Answer 1

顯然，WebKit（由Safari和Chrome使用）將負outline-offset應用於集中的表單輸入。 您可以在以下CSS規則中針對WebKit的默認樣式表中的重點表單輸入看到它：

input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
    outline-offset: -2px
}

因此，撤消此操作只需將其設置為0 ：

input:focus
{
    background: rgba(0,0,0,.3);
    outline-offset: 0;
}

更新了jsFiddle演示