Pulldownmenü formatieren
    


WWW.WEB-TOOLBOX.NET

ZURÜCK SITEMAP  

 Pulldownmenü formatieren

Hier eine kurze Erklärung zur Gestaltung von Pulldownmenüs mit CSS-Anweisungen. Ein wenig Kosmetik für ihre Online-Formulare.

Der Aufwand ist recht gering: Sie kopieren den CSS-Block in den HEAD des HTML-Dokuments und fügen zusätzliche CLASS-Attribute in die SELECT- und / oder OPTION-Zeilen ein.

funktioniert zwar nicht im NS4.x (macht aber auch nichts 'kaputt')


   Demo einer Anwendung

Hier verdeutliche ich durch unterschiedliche Hintergrundfarben, welche Straßen im Stadtkern und welche in den Gemeinden außerhalb liegen.




CSS-Anweisungen im Head:

<style type="text/css">
<!--

.sel {
font-family: Verdana,Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:12px;
border: 1px solid #FFFFFF;
background-color: #0070C0;
width:250px;
height:20px;
padding:2px;
}


.o1 {
color:#000000;
font-size: 12px;
font-family: Verdana,Arial, Helvetica, sans-serif;
background-color: #F4FFF4;
padding:2px;
}

.o2 {
color:#000000;
font-size: 12px;
font-family: Verdana,Arial, Helvetica, sans-serif;
background-color: #FFE6FF;
padding:2px;
}

-->
</style>


Class-Zuweisungen Optionen

Sie fügen lediglich die 'class-Anweisungen' in die SELECT und OPTION Befehle ein. Den Rest des Formulars belassen sie wie vorher.
<form ....

<select class="sel">
<option selected value="nothing">Buchstabe P</option>
<option class="o1">Pestalozzistraße</option>
<option class="o2">Peterstraße</option>

...

</select>

</form>







NACH OBEN