CODEWITHSUNDEEP
htmlfirefoxgoogle-chromecss
C.J.
C.J.

Reputation: 6869

Why does the outline of this text input display differently in Chrome than Firefox?

I've written this fiddle to demo the problem. I have a simple form. When a textbox gets focus all I wish to happen is for the textbox's background to change. In Firefox 9 this works fine. In Chrome it seems to incorrectly alter the input's outline. Even If I explicitly set it. Chrome changes it and puts a black outline around the input on focus.

Here's the JS Fiddle: http://jsfiddle.net/H3qay/

Any help would be appreciated.

Upvotes: 2

Views: 622

Answers (1)

BoltClock
BoltClock

Reputation: 723448

Apparently, WebKit (used by Safari and Chrome) applies a negative outline-offset to focused form inputs. You can see it in the following CSS rule for focused form inputs in WebKit's default style sheet:

input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
    outline-offset: -2px
}

So undoing this is simply a matter of setting it to 0:

input:focus
{
    background: rgba(0,0,0,.3);
    outline-offset: 0;
}

Updated jsFiddle demo

Upvotes: 6

Related Questions