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?

FWIW, `outline: revert;` technically works, while Firefox and Safari has implemented it, Chrome has not. See bug: https://bugs.chromium.org/p/chromium/issues/detail?id=579788. — Null, Oct 23 '19 at 13:32

score 56 · Answer 1 · edited May 23 '17 at 12:10

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.

This should be the selected answer, although duopixel does offer some good insights. — ooolala, Apr 27 '16 at 08:55

score 32 · Accepted Answer · answered Jul 08 '11 at 02:00

32

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/

answered Jul 08 '11 at 02:00

methodofaction

68,083
21
145
162

1

Although this is not the actual answer, it is a very good solution that works. Thanks! – Mario Estrada Jul 08 '11 at 15:10
1

The modern way would be to do `outline: initial` – Mario Estrada May 04 '20 at 22:00
1

But `outline: initial` is not working as expected. Actually it does nothing. :-( – Petr Odut Jan 26 '21 at 10:15

score 4 · Answer 3 · answered Jul 06 '11 at 19:19

4

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

.nool { outline: none; }

answered Jul 06 '11 at 19:19

OneOfOne

88,915
19
172
173

2

OneOfOne is correct. CSS does not allow you to "undo" styles. If you can, remove whatever css rule is applying "outline:none" to every element and use a class to specifically target which form elements should not have an outline. – jbarreiros Jul 06 '11 at 19:27
1

@jbarreiros: Even though it works, it's not an elegant or semantic solution to put classes on everything. Duopixel's solution accomplishes this using pure CSS. – Wylie Jul 08 '11 at 02:07

Restore Webkit's CSS outline on input field

3 Answers3

Linked