为什么此文本输入的大纲在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演示