2

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?

jigglyT101
  • 984
  • 1
  • 15
  • 33

1 Answers1

1

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

joshmax
  • 378
  • 5
  • 20
  • 1
    Nope, still doesn't work for select. Select isn't input[type=select]. Even when that is corrected it doesn't work. You escaped a down vote because this is about radio buttons. – iPadDeveloper2011 May 01 '13 at 00:09
  • iPadDeveloper2011, you're right. I've updated my answer. Amazing to me how novice I was in 2011 :P – joshmax May 02 '13 at 12:34