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?
+1
A:
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.
Yi Jiang
2010-09-23 14:47:14
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
2010-09-23 15:02:55
+5
A:
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.
David Thomas
2010-09-23 14:47:35
Thank you! Yeah, I definitely am...it's just I have a background on the inputs that makes it look ugly.
Chris
2010-09-23 14:51:11
@Chris, always a pleasure. And it was a just-in-case reminder, no offence intended =)
David Thomas
2010-09-23 14:54:35