Menü-Listen mit CSS formatieren

Was sich mit Input-Feldern machen lässt, das klappt eingeschränkt auch mit Menü-Listen (Pulldown-Menüs). Ein Rahmen macht hier allerdings keinen Sinn, denn der ist bereits durch das Menü selbst vorgesehen.

Die Sache funktioniert nur mit einem geeigneten Browser. Was allerdings dem Einsatz dieser Technik nicht abträglich ist. Dem Besucher entgeht nichts, wenn er statt fröhlicher Farben nur schwarzweiße Elemente sieht.

Menü-Liste mit farbiger Schrift

<form name="form1">
<select name="select" style="color : red">
<option value="1">Link Nr. </option>
<option value="2">Link Nr.</option>
<option value="3">Link Nr.</option>
</select>
</form>

Menü-Liste mit farbigem Hintergrund

<form name="form2">
<select name="select" style="background-color : yellow">
<option value="1">Link Nr. </option>
<option value="2">Link Nr.</option>
<option value="3">Link Nr.</option>
</select>
</form>

Menü-Liste mit vergrößerter Schrift

<form name="form3">
<select name="select" style="font-size : 20px">
<option value="1">Link Nr. </option>
<option value="2">Link Nr.</option>
<option value="3">Link Nr.</option>
</select>
</form>

Verschiedene Formatierungen im Zusammespiel

<form name="form4">
<select name="select" style="font-size : 20px; font-family : courier;background-color : yellow; color : blue">
<option value="1">Link Nr. </option>
<option value="2">Link Nr.</option>
<option value="3">Link Nr.</option>
</select>
</form>

Verschiedenfarbige Hintergründe für einzelne Auswahlfelder

<form name="form5">
<select name="select">
<option value="1" style="background-color : pink">Link Nr. </option>
<option value="2" style="background-color : yellow">Link Nr.</option>
<option value="3" style="background-color : lightblue">Link Nr.</option>
</select>
</form>

 

Artikel, die Sie auch interessieren könnten:

Schaltflächen (Buttons) gestalten
Niemand ist auf Einheitsgrau angewiesen. Es gibt durchaus Möglichkeiten mehr aus den langweiligen Formular-Knöpfen herauszuholen. Mit ein wenig Phantasie und den richtigen Codes passen auch Formulare in ein schickes Seitenlayout.

 

 
   Anzeigen

Navigation:    Webdesign - Programmierung - Web Grafiken - Software Guides - Tools - Templates - Schriftarten - Seminare - IT News
Partner:   Template OK - PCopen - SITEopen - PCopen Schweiz - HTMLopen Schweiz - VirtualUniversity.ch - WEB-SET.com - YesMMS - Job und Karriere