在输入字段上恢复 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; }