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:

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.

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