How can I remove the blue glow that surrounds a selected text input box using pure CSS?
3 Answers
This should do it:
input:focus {
outline:none;
}
EDIT (2015): If you are designing for a wide audience, recall that the outline is often a critical accessibility feature for users who navigate via keyboards or require more apparent visual feedback. If you remove the outline, make sure to define an alternative focus state that provides appropriate visual feedback to your users.
-
22
-
1
-
Due to restriction by browsers as select > options property outline is handled by shadowDOM. You can try [This] (harvesthq.github.io/chosen) jQuery plugin– TechYogiMar 14, 2016 at 11:16
I prefer a nice solid reset like:
input, textarea, select, a { outline: none; }
Outline 'none' on anchor tags prevents horrible focus outlines on many Android browsers.
-
-
I prefer this one as well. Also,
select:focus
didn't seem to work for me. I don't see a problem with doing this at all. The:focus
is unnecessarily explicit. Jun 15, 2014 at 15:06 -
if you are using bootstrap then you have to add box-shadow: none
input:focus {
outline:none;
box-shadow: none;
}