How to get rid of text box selection highlight on Chrome/Safari?

Question

When using Chrome or Safari, an active text box or text area will display a blue/orange border around the box. I have seen some sites get rid of this, but I have copied their CSS and it's still there. How do I do it?

Further to this question, I wonder if it's possible to change the color of the outline instead of just removing it? I am in the same position, when the outline occurs, I get an ugly green color. Would be great to change it! — Kyle, Sep 23 '10 at 15:07

score 79 · Accepted Answer · answered Sep 23 '10 at 14:47

79

The following CSS usually removes the default highlight-border:

input:focus {outline: none; }

It's worth remembering that the outline is a useful visual feedback for the UI focus, for those users not using a mouse (keyboard navigation, for example), and it's worth substituting another visual cue to replace the loss of the outline.

answered Sep 23 '10 at 14:47

David Thomas

249,100
51
377
410

1

Thank you! Yeah, I definitely am...it's just I have a background on the inputs that makes it look ugly. – Chris Sep 23 '10 at 14:51
@Chris, always a pleasure. And it was a just-in-case reminder, no offence intended =) – David Thomas Sep 23 '10 at 14:54

score 16 · Answer 2 · answered Sep 23 '10 at 14:47

16

You can use

input:focus, textarea:focus {
    outline: 0;
}

But try to give some indication to the user that the form element is focused, for accessibility reasons.

answered Sep 23 '10 at 14:47

Yi Jiang

49,435
16
136
136

4

Well, I'm gonna +1 you, since we came up with the same answer at the same time...(I'd feel rude otherwise) =) – David Thomas Sep 23 '10 at 15:02

score 3 · Answer 3 · answered Jul 29 '13 at 03:00

3

I just did this :

:focus { outline: none; }

answered Jul 29 '13 at 03:00

ericmackey

43
3

How to get rid of text box selection highlight on Chrome/Safari?

3 Answers3