为什么此文本输入的大纲在Chrome中的显示方式与Firefox不同？

Question

我写了这个小提琴来演示这个问题。我有一个简单的表格。当文本框获得焦点时，我希望发生的是文本框的背景发生变化。在Firefox 9中，这很好用。在Chrome中，它似乎错误地改变了输入的轮廓。即使我明确地设定它。 Chrome会更改它并在焦点上的输入周围添加黑色轮廓。

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

任何帮助都将不胜感激。

Answer 1

显然，WebKit（由Safari和Chrome使用）将负outline-offset应用于聚焦表单输入。您可以在以下CSS规则中查看WebKit's default style sheet中的焦点表单输入：

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

Updated jsFiddle demo