HTML/CSS - Setting Select Menu Style

I'm using several dropdown menus for a site I'm working on. In Chrome and Safari the menus render fine. But in firefox, the dro开发者_运维百科pdown arrow is placed in the middle of the menu.

---

EDIT Here's pictures.

This is what it should look like in all browsers. (It's only like this in Chrome.)

This is what it's currently doing in Firefox and IE:

How can I fix this?

---

Try to use background position:right center; in CSS. This might help

---

Styling a select element is a royal pain in the butt. I would suggest not using a select element, and instead use radio buttons + labels + JavaScript to emulate a select element. It will give you more control over the styling, and still maintain accessibility (if done correctly).

I believe there is a jQuery plugin to do this (I know you didn't tag JavaScript or jQuery).

The markup could look something like this:

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

And just to show that I'm not full of it here's a jsfiddle of a pure HTML+CSS select style element without actually using a select element. It's a 3 minute hack-job, and JavaScript would make it much cleaner/work in Internet Exploder.