Firefox - Remove Dotted Line Around Radio Button

So I've seen the related posts on how to remove the dotted line around element in Firefox开发者_运维知识库. But still no joy.

I've a unordered list with each LI containing a label and a radio button. If I set the background color of the LI to any color then Firefox's dotted line appears around the radio button. If I remove the background I get no dotted line. Strange.

I've tried using the following but still no luck.

input[type="radio"]:focus {border:0;}
input[type="radio"]:-moz-focusring {outline:none;}

Here's a JSFiddle of the problem (try removing/adding the background color on the LI):

http://jsfiddle.net/pSVD9/4/

Any ideas on how to remove the dotted line but keep the background color on the LI?

If it happens again, this should fix it:

input[type=radio],  select {
    -moz-appearance: none !important;
    -moz-border-bottom-colors: transparent !important;
    -moz-border-left-colors: transparent !important;
    -moz-border-right-colors: transparent !important;
    -moz-border-top-colors: transparent !important;
}

Although, it ends up adding some spacing to the top of it. It's negligible though.

// edited for Tom Roggero
// edited for iPadDeveloper2011