Removing the blue glow from an HTML text input when selected

CssInput

Css Problem Overview

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

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

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.

Solution 3 - Css

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

input:focus {
    outline:none;
    box-shadow: none;
}
Categories
Recommended Css Solutions
Recommended Input Solutions

Previous Solution:

static variable link error

C++XcodeStatic LibrariesClangStatic Methods

Next Solution:

why doesn't java send the client certificate during SSL handshake?

JavaSslHttpsCertificateCa

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJSW189View Question on Stackoverflow
Solution 1 - CssPuragView Answer on Stackoverflow
Solution 2 - CsswilsonpageView Answer on Stackoverflow
Solution 3 - Cssr4k3shView Answer on Stackoverflow