Restore Webkit's CSS outline on input field

Question

I want to restore the default CSS outline setting on some form fields but I want it restored to the default Webkit or browser specific style.

The page I'm working with has outline: none applied on all elements, and I just want to revert to the default setting on a few ones. Any ideas?

Answer 1

The answer to your actual question (straight from WebKit's default html.css styles) is this:

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

The value of -webkit-focus-ring-color is determined on each platform separately (if you're super keen, you can look for WebCore::systemFocusRingColor). In practice, the values vary by platform.

In Safari v6 and Chrome v20 on OS X Lion, the actual value is:

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

…and in Chrome v20 on Windows and Chromium v18 on Linux, the value I got was:

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

As described in this great StackOverflow answer, you can run this jsFiddle to calculate the outline colour on your own machine.

Answer 2

Instead of resetting with outline: none, reset with outline-width: 0. This prevents the browser from clearing the styles and when you reapply a width the style will still be there.

input:focus {
  outline-width: 0;
}

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

http://jsfiddle.net/VT4Hb/

Answer 3

use a class on the fields you want without an outline.

.nool { outline: none; }