html:从FF的选择框中删除轮廓

我找到了解决方案，但是 它是所有黑客之母，希望它将成为其他更强大解决方案的起点.缺点（我认为太大）是任何不支持 text-shadow的浏览器 但支持 rgba （IE 9）不会渲染文本，除非您使用诸如Modernizr之类的库（未经测试，只是一个理论）。

Firefox使用文本颜色来确定虚线边框的颜色.所以说，如果你愿意...

select {
  color: rgba(0,0,0,0);
}

Firefox将使虚线边框透明.但是，当然您的文本也将是透明的！ 因此，我们必须以某种方式显示文本. text-shadow 进行救援：

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

我们放置了没有偏移且没有模糊的文本阴影，因此替换了文本.当然，较旧的浏览器对此一无所知，因此我们必须为该颜色提供后备选项：

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

这是IE9发挥作用的时候：它支持 rgba 但没有文本阴影，因此您将获得一个明显为空的选择框.使用 text-shadow获取您的Modernizr版本 检测并执行...

.no-textshadow select {
  color: #000;
}

享受。

好吧，Duopixel的回答很完美.如果我们走得更远，我们可以使其防弹。

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

您可以使用，仅适用于Firefox，并且消失了所选选项周围的丑陋轮廓。

这里是解决方案协作的解决方案协作，可以解决Firefox选择框的样式问题.使用此CSS选择器作为常规CSS重置的一部分.

Class根据问题删除轮廓，但也删除所有背景图片（因为我通常使用自定义下拉箭头，而Firefoxes系统下拉箭头目前无法删除）.如果将背景图像用于下拉图像以外的其他任何东西，只需删除 background-image: none !important;行

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

通常，窗体控件无法以这种精确度进行样式设置.据我所知，没有一个浏览器在所有控件中都支持合理的属性范围.这就是为什么有大量的JavaScript库会使用图像和其他HTML元素"伪造"表单控件，并使用代码来模仿其原始功能：

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

这将针对所有Firefox版本

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

如果计划在网站上使用同一样式表的其他页面上显示大纲，则可能要删除！important。