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中变得更加清洁/工作。