HTML / CSS - 设置选择菜单样式

Question

我正在为我正在处理的网站使用多个下拉菜单。在Chrome和Safari中，菜单渲染得很好。但是在Firefox中，下拉箭头位于菜单中间。

---

EDIT 这是图片。

这在所有浏览器中应该是这样的。 （Chrome中只有这样。）

这正是它目前在Firefox和IE中的作用：

我该如何解决这个问题？

Answer 1

尝试使用背景位置：右中心;在CSS中。这可能会有所帮助

Answer 2

设置select元素的样式是对接中的皇家痛苦。我建议不使用select元素，而是使用radio buttons + labels + JavaScript来模拟select元素。它将使您更好地控制样式，并仍然保持可访问性（如果正确完成）。

我相信有一个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中工作。