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

Question

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:

Solution 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

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

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

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;
}

View more solutions

Comments

[The301]

Thank you for your awnser, I tried this already, and it doesn't work somehow.

[Aziz]

@The301 please create a basic demo so we could inspect it. you can create one on jsFiddle

[The301]

Provided a screenshot, i'm pretty sure you guys know what i mean now.

[Wowsk]

We know what you meant before this, but we need code if the listed solution doesn't work.