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

Question

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

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

Answer 1

您实际问题的答案(直接来自WebKit的默认html.css样式)是这样的:

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

正如在这个伟大的StackOverflow答案中所描述的,你可以运行这个jsFiddle来计算你自己机器上的轮廓颜色.

Answer 2

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

input:focus {
  outline-width: 0;
}

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

http://jsfiddle.net/VT4Hb/