HTML/CSS - Einstellung Wählen Sie Menü Stil

Question

Ich benutze mehrere Dropdown-Menüs für eine Website, an der ich arbeite. In Chrome und Safari werden die Menüs gut dargestellt. Aber im Firefox ist der Dropdown-Pfeil in der Mitte des Menüs platziert.

---

EDIT Hier Bilder.

So sollte es in allen Browsern aussehen. (Es ist nur wie dies in Chrome.)

Dies ist, was es zur Zeit in Firefox und IE tut:

Wie kann ich dieses Problem beheben?

Answer 1

Versuchen Sie, Hintergrundposition zu verwenden: rechts Mitte; in CSS. Dies könnte helfen

Answer 2

Styling ein select Element ist eine königliche Schmerzen im Hintern. Ich würde vorschlagen nicht mit einem select Element, und stattdessen radio buttons + labels + JavaScript, um ein Auswahlelement zu emulieren. Dadurch erhalten Sie mehr Kontrolle über das Styling und behalten die Zugänglichkeit bei (wenn dies korrekt durchgeführt wird).

Ich glaube, es gibt ein jQuery-Plugin, um dies zu tun (ich weiß, dass Sie JavaScript oder jQuery nicht markiert haben).

voll davon

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

Und nur um zu zeigen, dass ich nicht hier ist ein jsfiddle of a pure HTML+CSS select style element without actually using a select element:

Das Markup wie folgt aussehen könnte. Es ist ein 3-Minuten Hack-Job, und JavaScript würde es viel sauberer machen/arbeiten in Internet Exploder.