select选中虚线_如何删除Firefox中的SELECT / OPTION下拉控件上的虚线？

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

解决方案

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;

}