 Pulldownmenü formatieren
Hier eine kurze Erklärung zur Gestaltung von Pulldownmenüs mit CSS-Anweisungen. Ein wenig Kosmetik für Ihre Online-Formulare und Auswahlseiten.
| |
Pulldown / Dropdown formatieren
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>
|
Home • CSS • CSS-Pulldownmenü