HTML/CSS - 設置選擇菜單樣式

Question

我正在爲我正在使用的網站使用多個下拉菜單。在Chrome和Safari中，菜單呈現效果很好。但在Firefox中，下拉箭頭放在菜單的中間。

---

編輯 這裏的圖片。

這就是它在所有瀏覽器中的樣子。 （這只是像這樣的瀏覽器。）

這是它目前做在Firefox和IE什麼：

我該如何解決這個問題？

Answer 1

嘗試使用背景位置：右中心;在CSS中。這可能有幫助

Answer 2

造型select元素是對接的皇家痛苦。我建議不是使用select元素，而是使用radio buttons + labels + JavaScript來模擬選擇元素。它會給你更多的樣式控制權，並且仍然保持可訪問性（如果正確的話）。

我相信有一個jQuery插件可以做到這一點（我知道你沒有標記JavaScript或jQuery）。

的標記可能看起來是這樣的：

<ul class="select-replacement"> 
    <li> 
    <input type="radio" id="option1" name="selectElementName" value="value 1" /> 
    <label for="option1">Value 1</label> 
    </li> 
    ... 
</ul> 

而只是爲了證明我是不是充滿了這裏是一個jsfiddle of a pure HTML+CSS select style element without actually using a select element。這是一個3分鐘的黑客工作，而JavaScript會使它在Internet Exploder中變得更加清潔/工作。