Listen-Menüs mit CSS formatieren

Normale DropdownMenüs, oder Listenmenüs sehen schäbig
aus. Mit CSS kann man diese schnell, zu einem Highlight machen.

Mit CSS kann man eigentlich jedes Formularelement zu etwas wirklich
besonderem machen. So auch Listen-Menüs, die ja oft als normales
Menü verwendet werden.
Damit dieses nicht allzu "schäbig" aussieht, hier
nun ein paar Beispiele mit Erklärungen, für das Design
der Listen-Menüs.

Dunkelblauer Hintergrund & weiße Schrift

<select name="select" style="background:
darkblue; color: white;">
<option value="1">Eintrag</option>
<option value="2">Eintrag</option>
<option value="3">Eintrag</option>
</select>

Im Style-Attribut des <select> befinden sich
die Anweisungen, die die Liste einfärben. background:
darkblue; erzeugt den dunkelblauen Hintergrund, color:
white; für die weiße Schriftfarbe.

Sie können natürlich auch alle Select-Elemente, die das
entsprechende Stylsheet haben so formatieren.

<style type="text/css">
select {background: darkblue; color: white;}
</style>

Weiteres Beispiel

Inhalte ein wenig anders gestaltet

<style type="text/css">


select
{
font-family: monospace;
font-size: 10px;
font-weight: bold;
background: #336699;
color: #FFFFFF"
}
</style>

Hierbei wird mit font-family: monospace; die Schriftart
auf "monospace" festgelegt. Mit font-size: 10px;
wird die Schriftgröße auf 10 Pixel gesetzt, font-weight:
bold; gibt an, das der Text fett gedruckt werden soll.

Auch die einzelnen Optionen formatiert

<select name="select" style="color:white">
<option value="3" style="background: darkblue">Eintrag</option>
<option value="1" style="background: darkgreen">Eintrag</option>
<option value="2" style="background: darkred">Eintrag</option>
</select>

Bei diesem Beispiel sind auch die einzelnen Optionsfelder, also
die Auswahlmöglichkeiten nach dem obigen Muster formatiert.
Für diese Optionsfelder bietet es sich an, Klassen zu definieren,
sodass man nur noch auf die Klasse verweisen muss, wenn man eine
Option einer Liste dementsprechend formatieren will.

<style type="text/css">
option.typ1 {background: darkblue}
option.typ2 {background: darkgreen}
option.typ3 {background: darkred}
</style>

Der Verweis auf eine dieser Klasse aus dem <option> Element
sieht jetzt so aus:
<option value="2" class="typ2">Eintrag</option>