如何摆脱 Firefox 中的 <select> 元素轮廓？

【问题标题】：How do I get rid of <select> element outline in Firefox?如何摆脱 Firefox 中的 <select> 元素轮廓？
【发布时间】：2014-05-08 05:46:18
【问题描述】：

所以这里有一个演示问题的小提琴：http://jsfiddle.net/CVTrb/1/，单击并选择任何选项，然后您应该会看到一条不完全位于 <select> 元素内的细灰线。

这里有一张图片展示了这一点：

【问题讨论】：

标签： html css

【解决方案1】：

感谢这篇文章：https://stackoverflow.com/a/18853002/1261316

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

【讨论】：

【解决方案2】：

将outline: none; 添加到.form-dropdown

【讨论】：

由于某种原因，这个解决方案不起作用，但@DrydenLong 却做到了。这就是为什么我选择他的答案仅供参考。

【解决方案3】：

我要添加一个调整：
如果你有禁用的选项，那 text-shadow 有点丑化它们

select:-moz-focusring {
    color: transparent;  /* hides that darn border... and the options */
    text-shadow: 0 0 0 #000;   /* "unhide" the options */
}
select:-moz-focusring option:disabled {
    text-shadow: none;     /* remove the inherited shadow from disabled options */
}

【讨论】：