Unable to get rid of Firefox focus display in radios and checkboxes

Question

I'm trying to get rid of a blue focus outline in Firefox. When I set outline to 0 or none, nothing happens. If I set outline to something else, a separate outline appears (in the example it is a square green one). I also tried using a box shadow. But if I try to remove or modify the border, nothing happens. (I can't make a separate border or remove the automatic outline) In the example I even tried using an inline style with !important. When I run the snippet in the editor in Firefox the focus outline shows up straight away.

$(function(){
    $('#test').focus();
});

[type=radio]:focus {
        box-shadow:1px 1px 4px red;
        outline:1px solid green;
        border:0 !important;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="question-preview2" /> 1<br>
<input id="test" type="radio" name="question-preview2" /> 2<br>
<input style="border:none !important;" type="radio" name="question-preview2" /> 3<br>

Edit: -moz-appearance:none; almost fixes it... but the radio still appears a bit different (has a sunken appearance)

$(function(){
    $('#test').focus();
});

input:focus{-moz-appearance:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" type="radio" name="question-preview2" /> 1 <- has sunken appearance<br>
<input type="radio" name="question-preview2" /> 2<br>
<input type="radio" name="question-preview2" /> 3<br>

carl carl · Accepted Answer · 2016-04-22T01:19:02

Try using ::-moz-focus-inner, then you don't need to specify the :focus pseudo selector. This worked for me.

Unable to get rid of Firefox focus display in radios and checkboxes

2 Answers