在Firefox中如何去掉元素大纲?

So here's a fiddle demonstrating the problem: http://jsfiddle.net/CVTrb/1/, click and select on any option, and then you should see a thin gray line appear that doesn't exactly sit within the <select> element.

这是一个演示问题的工具:http://jsfiddle.net/CVTrb/1/，点击并选择任何选项，然后您会看到一条细灰色的线出现在元素中。

Here's an image demonstrating this:

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

:

:

3 个解决方案

#1

Credit to this post here: https://*.com/a/18853002/1261316

以下是本文的出处:https://*.com/a/18853002/1261316

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

#2

Add outline: none; to .form-dropdown

添加大纲:没有;对.form-dropdown

#3

I'm going to add a tweak:
If you've got disabled options, that text-shadow kinda uglifies them

我将添加一个调整:如果你有禁用选项，那个文本阴影会使它们变得丑陋

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 */
}