只有在Firefox中透明選擇下拉菜單

Question

我有一個自定義樣式的SELECT元素。我使用包含「下拉箭頭」的背景圖片。你可以找到一個我在做這個活織的例子http://liveweave.com/xcfh0Z

當你在Chrome，Safari，IE或Opera中使用選擇框時，一切都像預期的那樣工作：select與給定的圖像一起顯示，if我點擊選擇框，我可以看到一個白色背景的下拉列表。

但是，Firefox的行爲有所不同。當我點擊Firefox中的選擇框時，它會打開一個透明背景的下拉列表。我發現這個問題的唯一方法是使用

background-color: white 

...這會導致我的選擇周圍沒有「非常酷的白色邊框」。

有沒有人想過如何解決這個問題？

Answer 1

爲了讓您的背景圖像起作用，您的<select>的background-color必須透明。相反，你應該在<option>背景設置爲白色，像這樣：

option { 
    background-color: white; 
} 

見DEMO。