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:

Where do you see a blue outline? Are you talking about Google Chrome? — Aziz, Apr 13 '16 at 17:52
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! — The301, Apr 13 '16 at 17:53
Possible duplicate: http://stackoverflow.com/questions/20593224/remove-blue-selected-outline-on-buttons — KhoPhi, Apr 13 '16 at 19:40
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. — GHC, Apr 13 '16 at 20:28

score 9 · Answer 1 · answered Apr 13 '16 at 17:53

9

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.

answered Apr 13 '16 at 17:53

Wowsk

3,557
2
16
28

1

Thank you for your awnser, I tried this already, and it doesn't work somehow. – The301 Apr 13 '16 at 17:56
@The301 please create a basic demo so we could inspect it. you can create one on jsFiddle – Aziz Apr 13 '16 at 17:57
Provided a screenshot, i'm pretty sure you guys know what i mean now. – The301 Apr 13 '16 at 18:01
We know what you meant before this, but we need code if the listed solution doesn't work. – Wowsk Apr 13 '16 at 18:04

Bill · Answer 2 · 2019-11-21T07:41:22.583

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

score 4 · Answer 3 · answered Oct 26 '18 at 01:10

4

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

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

answered Oct 26 '18 at 01:10

TWilly

4,704
3
39
70

score 1 · Answer 4 · answered Feb 11 '21 at 12:12

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

score 0 · Answer 5 · answered Apr 13 '16 at 18:50

0

Try this:

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

Hope it helps!

answered Apr 13 '16 at 18:50

Leandro Soriano

659
1
6
14

score 0 · Answer 6 · edited May 04 '22 at 05:00

0

Try This

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

edited May 04 '22 at 05:00

Jakub Kurdziel

1,883
1
9
16

answered Apr 28 '22 at 08:38

Kasetiya Yash

1
3

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](/help/how-to-answer). – Community Apr 28 '22 at 14:06

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

6 Answers6