How can I remove the dotted lines on a SELECT/OPTION dropdown control in Firefox?

Question

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?

Addendum

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; } 

Answer 1

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; } 

Answer 2

Here's combined hack for that:

select:focus {     outline: 1px solid white;     outline-offset: -2px; } select ~ input[type=button] {     -moz-appearance: menulist-button;     margin-left: -19px;     width: 18px;     height: 18px;     z-index: 10; } 

Then add input with tabindex=0 after each select And some code for focus "delegation":

$("select ~ input[type=button]").addEvent('focus', function(){   this.getPrevious().focus(); });