Spielereien mit Formularen: Icons für option-Tag

Viele Formular-Elemente widersetzen sich hartnäckig allen Annäherungen seitens CSS – sehen wir mal von border-radius und font-size für Eingabefelder ab. Etwas appearance: none und ein paar Tricks holen Bilder in das option-Tag.

select, input type=checkbox, input type=radio und type=range lassen sich nur widerwillig durch CSS verkleiden. 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.

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 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>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.