Icons für option-Tag

appearance : none

Etwas appearance: none und ein paar Tricks holen Bilder in das option-Tag und bringen eine größere Schrift für Select-Menüs.

select, input type = checkbox, type = radio und type = range lassen sich nur widerwillig durch CSS einkleiden. Sie erben ihre Stile nicht allein vom Browser, sondern auch vom Betriebssystem. appearance : none ist das Druckmittel, das die Browser zur Aufgabe ihrer eigenen Vorstellungen zwingen soll.

Die kleinen Select-Menüs verweigern eine größere Schrift und die Schrift ist sogar noch kleiner als 1em. Zuerst also appearance : none und anschließend das CSS für eine größere Schrift.

Das Icon zum Auf- und Zuklappen des Select-Menüs ist jetzt ein Hintergrundbild, das mit center right vertikal zentriert an den rechten Rand gesetzt wird.

select.ff {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1.1em;
    padding:4px 8px;
    background: url(open.png) no-repeat center right;
    border-radius: 8px;
    border:1px solid silver;
    cursor:pointer;
}

Das funktioniert in allen Browsern außer – nein, es funktioniert auch in IE und in Microsoft Edge. Auch Firefox zeigt wieder die größere Schrift, obwohl Firefox zwischenzeitlich nicht an die größere Schrift für option-Tags geglaubt hat.

Icons für das option-Tag

Ein Icon oder ein Bild zum option-Tag könnte langweiligen select-Listen eine Auffrischung verleihen. Als Ersatz wirken Sonderzeichen oder Icon-Fonts.

Die Bilder hier option-Tag sind Emojis oder schlichte Sonderzeichen aus dem UTF8-Schatzkästchen.

Die Zeichen müssen kopiert und aus der Zwischenablage eingesetzt werden – das war’s schon.

<select multiple name="wetterbox" id="sbox" style="font-size:1em;">
   <option value="sunny"> 🌤 Sonnenschein </option>
   <option value="cloud"> 🌥  Wolken </option>
   <option value="rainy" selected> 🌧 Dauerregen</option>
   <option value="snow"> ☃ Schnee </option>
</select>