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

i'm trying rid of blue focus outline in firefox. when set outline 0 or none, nothing happens. if set outline else, separate outline appears (in example square green one). tried using box shadow. if try remove or modify border, nothing happens. (i can't make separate border or remove automatic outline) in example tried using inline style !important. when run snippet in editor in firefox focus outline shows 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; fixes it... radio still appears bit different (has 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>

try using ::-moz-focus-inner, don't need specify :focus pseudo selector. worked me.