CSS: Option-Elemente mit einer Grafik hinterlegen

SELFHTML aktuell Artikel CSS
	CSS: Option-Elemente mit einer Grafik hinterlegen
	Andreas Waechter (MudGuard) Hinweise zum Thema Beispiel mit Erläuterungen Weiterführende Links

Andreas Waechter (MudGuard)

E-Mail:	mail@andreas-waechter.de
Homepage-URL:	http://andreas-waechter.de

Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!

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.

Beispiel mit Erläuterungen

Beispiel

Anzeigebeispiel: So sieht's aus (nur sinnvoll bei Verwendung von Mozilla 1.0/Netscape 6.2 oder höher)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Testseite Graphiken in Option-Elementen</title>
<style type="text/css">
<!--

    option[value=deutschland]:before { content:url("de.gif"); }
    option[value=irland]:before { content:url("ie.gif"); }

-->
</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 value="irland">Irland</option>
                    <option value="deutschland">Deutschland</option>
                </select>
            </td>
        </tr>
    </table>
</body>
</html>

Erläuterung:

Eine Zeile wie

option[value=deutschland]:before { content:url("de.gif"); }

ist ausreichend, um ein Option-Element mit einer Grafik zu versehen.
option[value=deutschland] sorgt für die Auswahl der Option-Elemente, die ein Value-Attribut mit Wert "deutschland" haben. Hier könnte natürlich jeder andere Selektor stehen, der genau die gewünschten Option-Elemente auswählt.

Entscheidend ist beim Selektor das Pseudo-Element :before, welches dafür sorgt, dass der angegebene Inhalt vor dem Inhalt des ausgewählten Elements angezeigt wird.
Alternativ ist auch :after möglich. Die Angabe von :after bewirkt, dass jedes Bildchen unmittelbar ans Ende des Textes angehängt wird. Aber gerade in einer Select-Box ist es schöner, wenn die Bildchen am Anfang stehen, da sie dann sauber untereinander erscheinen.

Berücksichtigen Sie bei der Notation, dass Leerzeichen in CSS-Selektoren eine Bedeutung haben. Zwischen dem restlichen Selektor und dem Pseudo-Elementen :before bzw. :after darf kein Leerzeichen oder sonstiger Whitespace stehen.

Dem Pseudo-Element wird die Eigenschaft content mit einer URL als Value zugewiesen. Dies bewirkt, dass die genannte Ressource, in diesem Fall ein Bildchen mit der deutschen Flagge, angezeigt wird. Natürlich nur dann, wenn die Ressource gefunden und auf dem aktuellen Ausgabegerät angezeigt werden kann.

Die zweite Zeile im CSS-Stylesheet ist analog zu interpretieren. Hier wird den Optionen-Elementen mit einem Value-Attribut des Wertes "irland" ein anderes Bildchen, die irische Flagge, zugewiesen.

Das Schöne an der ganzen Sache ist, dass am HTML-Code der Options- und des Select-Elementes nichts geändert werden muss, sofern die vorhandenen Attribute zur eindeutigen Auswahl ausreichen.

Die Anwendung auf Option-Elemente ist natürlich nur ein Beispiel, wie die Pseudo-Elemente :before und :after verwendet werden können. Eine weitere von vielen Möglichkeiten sind z.B., interne und externe Verweise oder Links auf verschiedene Sprachversionen. Diese können mit unterschiedlichen Bildchen versehen werden, indem den Verweisen zur Unterscheidung verschiedene Klassen z.B. "intern" und "extern" zugeordnet und im CSS die zwei Bildchen zugewiesen werden.

a.intern:before { content:url("intern.gif"); }
a.extern:before { content:url("extern.gif"); }

Das ist wesentlich einfacher, als vor jedem Verweis ein Image-Element einzufügen. Der Nachteil dieser Methode ist, wie bereits erwähnt, dass das nur mit den wenigsten Browsern funktioniert. Aber selbst in ganz alten Browsern führt das zu keinerlei Problemen, da diese Browser das ihnen unbekannte CSS schlichtweg ignorieren.

Anstelle der Bilder, die über die Url eingebunden werden, kann auch Text angeben werden. Diesen Text kann dann über die üblichen CSS-Eigenschaften noch formatieren werden, z.B.:

option:before { content:"Land: "; color:red; font-weight:bold; }

Es gibt also viele Möglichkeiten und man kann nur hoffen, dass bald alle aktuellen Browser diese schöne Features unterstützen.

Beachten Sie:

Im Falle der Dropdownbox werden die Bilder nur im aufgeklappten Zustand angezeigt, nicht bei dem sichtbar ausgewählten.

Bislang werden die Pseudo-Elemente :before und :after nur von Mozilla bzw. Netscape 6 und später unterstützt.

Weiterführende Links

Die folgenden Stellen werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.

Englische Seite, CSS Standard: Selectors,, insbes. Abschnitt 5.12.3 (und 5.8 für die Auswahl über Attributwerte)
Englische Seite, CSS Standard: Generated Text, insbes. Abschnitt 12.2
SELFHTML CSS, Pseudoelemente :before und :after

CSS:Option-Elemente mit einer Grafik hinterlegen