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:

Stackhouse

Where do you see a blue outline? Are you talking about Google Chrome? – Lovable

Yes, in google Chrome, whenever i click on the radio checkbox it gives me a square blue outline around it, and i want to get rid of it! – Stackhouse

Possible duplicate: #20593724 – Derision

Can you show us your CSS and the HTML you are referencing it in? The flagged duplicate has outline: none as a solution, which you already state you've tried. – Cerotype

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

Crypto

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

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

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

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

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

Planoconvex

Answer 3

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

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

Persona

thanks , adding box-shadow: none; solves the issue – Inositol

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

Quasijudicial

Answer 5

Try This

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

Verger

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Gillum

Answer 6

Try this:

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

Hope it helps!

Lahomalahore

box-shadow: none – Gamekeeper