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

Question

在Chrome和其他浏览器中,我的下拉列表看起来不错:

但是,在Firefox中它有不需要的虚线:

我已成功删除了这些CSS语句的按钮和输入元素的不需要的Firefox虚线:

button::-moz-focus-inner { border: 0; }
input::-moz-focus-inner { border: 0; }

所以我认为这些适用于select/option元素,但它们不会:

select::-moz-focus-inner { border: 0; }
option::-moz-focus-inner { border: 0; }

如何删除此下拉菜单中的虚线,以便在Chrome和其他浏览器中显示？

附录

这些也不起作用:

select::-moz-focus-inner { border: 0; outline: 0 }
option::-moz-focus-inner { border: 0; outline: 0 }

也不是这些:

select { outline: 0; }
option { outline: 0; }

也不是这些:

select { outline: none; }
option { outline: none; }

Answer 1

詹姆斯布罗德的答案几乎是完美的,但选项的"仅影子"文字看起来很难看.这对我来说非常有用:

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

这是综合的技巧：

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

然后在每个选择和焦点“委托”的一些代码之后添加带有tabindex = 0的输入：

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

Answer 3

尝试使用outline: 0,按钮作品