In Chrome and other browsers my dropdown looks fine:
However, in Firefox it has unwanted dotted lines:
I have successfully removed the unwanted Firefox dotted lines for buttons and input elements with these CSS statements:
button::-moz-focus-inner { border: 0; }
input::-moz-focus-inner { border: 0; }
so I thought these would work for the select/option elements, but they don't:
select::-moz-focus-inner { border: 0; }
option::-moz-focus-inner { border: 0; }
How can I remove the dotted lines in this dropdown so that it appears as in Chrome and other browsers?
These don't work either:
select::-moz-focus-inner { border: 0; outline: 0 }
option::-moz-focus-inner { border: 0; outline: 0 }
nor these:
select { outline: 0; }
option { outline: 0; }
nor these:
select { outline: none; }
option { outline: none; }
James Broad's answer is nearly perfect, but the "shadow-only" text for the option items looks ugly. This is what works perfectly for me:
select:-moz-focusring {
color:transparent;
text-shadow:0 0 0 #000; /* your normal text color here */
}
select:-moz-focusring * {
color:#000; /* your normal text color here */
text-shadow:none;
}