CSS Option-Elemente
Hinweise zum Thema
Select-Boxen mit Bildchen zu den Texten versehen ist mit HTML nicht möglich, da das Content-Model des Option-Elementes #PCDATA ist, also reiner Text mit Entities, aber ohne HTML-Elemente.
Mit Mozilla 1.0 kam der erste Browser auf dem Markt, der es ermöglichte, dieses Problemes mittels CSS zu lösen.
Die hier beschriebene Methode zum Einbinden von Bildchen funktioniert sowohl für Dropdownboxen als auch für Listboxen. Beide werden mit dem Select-Element erstellt. Welche Box jeweils erzeugt wird, ist vom Wert des size-Attributs abhängig. 1 (der default-Wert) erzeugt eine Dropdownbox, größere Werte erzeugen eine Listbox.
Das dritte Beispiel zeigt eine Möglichkeit, die Angabe direkt in der Option mitzuteilen, ohne die :before - funktionalität zu nutzen!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testseite Graphiken in Option-Elementen</title>
<style type="text/css">
<!--
option[value=deutschland]:before { content:url("admin.gif"); }
option[value=irland]:before { content:url("debugmode_big.png");size:20px 20px; }
.om_image{
background-repeat: no-repeat;
background-size: 25px;
padding: 5px;
padding-left: 27px;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>Länderauswahl</td>
<td>
<select>
<option value="irland">Irland</option>
<option value="deutschland">Deutschland</option>
</select>
</td><td>
<select size="3">
<option class="om_image" value="irland">Irland</option>
<option class="om_image" value="deutschland">Deutschland</option>
</select>
</td>
</tr>
</table>
<select>
<br>
<option value="2deutschland" class="om_image" style="background-image: url('admin.gif');">Mein Irland</option>
<option value="2irland" class="om_image" style="background-image: url('debugmode_big.png'); ">Debug</option>
</select>
</body>
</html>
