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

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: