77

How can I remove the blue glow that surrounds a selected text input box using pure CSS?

2
  • 2
    Actually, in Google Chrome, it's orange. Just saying ;)
    – wecsam
    Feb 15, 2012 at 4:22
  • 1
    @wecsam: I was actually confused at first because I'm so used to Chrome's orange outline. :P
    – Purag
    Feb 15, 2012 at 4:23

3 Answers 3

154

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.

3
  • 22
    Sometimes box-shadow:none is required too
    – styks
    Sep 24, 2013 at 17:15
  • 1
    neither works for me on Chrome version 45.0.2454.101 m :(
    – J86
    Oct 4, 2015 at 13:35
  • Due to restriction by browsers as select > options property outline is handled by shadowDOM. You can try [This] (harvesthq.github.io/chosen) jQuery plugin
    – TechYogi
    Mar 14, 2016 at 11:16
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.

3
  • outline for inputs is only allowed on focus
    – Anselm
    Apr 28, 2013 at 13:37
  • 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
  • I needed to add !important for it to work for me.
    – JoeTidee
    Mar 30, 2016 at 22:04
0

if you are using bootstrap then you have to add box-shadow: none

input:focus {
    outline:none;
    box-shadow: none;
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.