'How do i remove the blue outline from a radio box when focused?

I would like to remove the blue outline it gives me when my radio is clicked/focused. I tried using outline: none and border: none, but nothing seems to be working. Does anyone have a solution for this?

Screenshot of what I’m talking about:

Image

htmlcsscheckboxradio


Solution 1:[1]

Remove the outline when the input element has the focus.

input:focus{
  outline:none;
}

As a side note, this is only for Google Chrome, other browsers use different techniques for showing an input element has the focus.

Solution 2:[2]

UPDATE:

Having worked a lot with accessibility lately, I've come to understand that removing the outline from inputs is not a very good thing. It prevents people using keyboard navigation to see what's focused.

ORG POST:

You might have to be more specific with your selector. When using bootstrap you have to override it (in my version, 3.3.6 at least) by selecting input[type="radio"]:focus, not just input:focus, like this:

input[type="radio"]:focus {
    outline: none;
}

Solution 3:[3]

Maybe a separate issue, but I had to set box-shadow to none as well.

input[type="checkbox"] {
    outline: none;
    box-shadow: none;
}

Solution 4:[4]

I know this is old, but hope that it helps somebody!

input[type='radio']:focus {
    outline: none !important;
    box-shadow: none !important;
}
/*For Bootstrap*/
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none !important;
}

Solution 5:[5]

Try this:

input[type=radio] {
    outline-color: transparent; 
}

Hope it helps!

Solution 6:[6]

Try This

input[type="radio"]:focus {
    outline: none;
    box-shadow: none; 
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Wowsk
Solution 2
Solution 3 TWilly
Solution 4 Sridhar Nathani
Solution 5 Leandro Soriano
Solution 6 Jakub Kurdziel

Related Questions