我同意Chrome的大的，突出显示的轮廓在许多情况下看起来不错，虽然它确实显示哪个字段是活动的。

截至2014年初，突出显示现在是蓝色(而不是黄色)，突出效果更小。以下说明仍然适用于修改此样式。

删除大纲

你可以设置outline：none;对任何元素完全删除突出显示。

input[type="text"],input[type="password"] { outline: none; }

这可能(可能)降低可访问性/可用性。甚至a website dedicated到完全删除轮廓的危险。

设计大纲

一个更好的选择是风格的轮廓，使其仍然可见，但不讨厌。见https://developer.mozilla.org/en-US/docs/CSS/outline

演示：http://jsfiddle.net/G28Gd/2/

INPUT[type="text"]:focus,INPUT[type="number"]:focus,INPUT[type="email"]:focus,INPUT[type="search"]:focus,INPUT[type="password"]:focus,INPUT[type="range"]:focus
{
    outline: 1px solid #0033dd;    
}​

用户期望

At times,style sheet authors may want to create outlines around
visual objects such as buttons,active form fields,image maps,etc.,
to make them stand out.

在理论上，大纲可以用于美容目的，虽然我从来没有发现除了指示焦点之外的实际使用。但是，最好只在元素实际聚焦时显示焦点状轮廓。换句话说，不要使一个元素看起来焦点，当它不是。

请记住，HTML锚点也可以接收焦点，并且他们的轮廓也可以设置样式。这可以是对用户有用的提示。

视觉呈现

The outline created with the outline properties is drawn “over” a Box,
i.e.,the outline is always on top,and does not influence the
position or size of the Box,or of any other Boxes. Therefore,
displaying or suppressing outlines does not cause reflow or overflow.

大纲可以应用于任何元素(再次，确保不会混淆用户)。

与边界不同，它们不影响盒子的位置或大小。这是很重要的，例如，当显示锚具有焦点时;如果您向锚点添加了边框，则整个框将可见地移动边框的大小(try it)。相比之下，大纲不会移动盒子。

这个盒子的独特性的一个缺点是，大纲并不总是准确地呈现在你想要的地方。 Replaced elements可能会以某种方式(现在，或未来)渲染，使用特定的突出显示样式可能看起来不好。 < input type =“range”>是一个很好的候选人看到这种行为。

这个大纲是功能，但不是很漂亮，甚至正确对齐(Chrome 26-29)。

按钮元素目前不是(Chrome 21)使用指定的轮廓看起来正确(尝试看看 – 轮廓不按照按钮的边缘)。

轮廓现在似乎与Chrome 26的按钮边缘正确对齐。