HTML/CSS - セレクトメニュースタイルの設定

Question

私が取り組んでいるサイトにはいくつかのドロップダウンメニューがあります。 ChromeとSafariでは、メニューがうまく表示されます。しかしfirefoxでは、ドロップダウンの矢印はメニューの中央に置かれます。

---

EDIT ここには写真があります。

これは、すべてのブラウザでどのように見えるかです。 （。これはChromeでのみ、このようなものだ）

これは、現在のFirefoxとIEでやっているものです：

私はこの問題を解決するにはどうすればよいですか？

Answer 1

は、背景の位置を使用してください：右のセンターを、 CSSで。これは、お尻で王室の痛みですselect要素をスタイリング

Answer 2

を助けるかもしれません。私はselect要素を使用してないを提案し、代わりにselect要素をエミュレートするためにradio buttons + labels + JavaScriptを使用します。これにより、スタイリングをより詳細に制御でき、アクセシビリティを維持することができます（正しく実行された場合）。

私はこれを行うためのjQueryプラグインは、（私はあなたがJavaScriptやjQueryのタグを付けていなかった知っている）があると信じています。ここjsfiddle of a pure HTML+CSS select style element without actually using a select elementだ

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

そして、ちょうど私がそれを完全じゃないことを示すために：

マークアップは次のようなものを見ることができます。これは3分のハックジョブであり、JavaScriptはInternet Exploderでもっとクリーンな/仕事をするでしょう。