在输入字段上恢复Webkit的CSS大纲

Question

我想在某些表单字段上恢复默认的CSS outline设置，但我希望将其恢复为默认的Webkit或浏览器特定的样式。

我正在使用的页面outline: none已应用于所有元素，我只想恢复到几个默认设置。有什么想法吗？

Answer 1

您实际问题（straight from WebKit's default html.css styles）的答案是：

:focus {
    outline: auto 5px -webkit-focus-ring-color;
}

-webkit-focus-ring-color的值分别在每个平台上确定（如果您非常热衷，可以查找WebCore::systemFocusRingColor）。在实践中，价值因平台而异。

在OS X Lion上的Safari v6和Chrome v20中，实际值为：

outline: rgb(94, 158, 215) auto 5px;

...在Windows上的Chrome v20和Linux上的Chromium v​​18中，我得到的价值是：

outline: rgb(229, 151, 0) auto 5px;

如this great StackOverflow answer所述，您可以run this jsFiddle to calculate the outline colour on your own machine。

Answer 2

不使用outline：none重置，而是使用outline-width重置：0。这可以防止浏览器清除样式，当您重新应用宽度时，样式仍然存在。

input:focus {
  outline-width: 0;
}

input.nostyle:focus {
  outline-width: 5px;
}

http://jsfiddle.net/VT4Hb/

Answer 3

在没有大纲的情况下在所需的字段上使用类。

.nool { outline: none; }