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。