Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Removing the blue glow from an HTML text input when selected

Tags:

css

input

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

like image 839
JSW189 Avatar asked Feb 15 '12 04:02

JSW189


People also ask

How do I change input focus in bootstrap?

Answer: Use the CSS box-shadow Property By default, all the textual <input> elements, <textarea> , and <select> elements with the class . form-control highlighted in blue glow upon receiving the focus in Bootstrap.


2 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.

like image 123
Purag Avatar answered Oct 03 '22 16:10

Purag


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.

like image 45
wilsonpage Avatar answered Oct 03 '22 17:10

wilsonpage