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.