Stildefinitionen für Aufklappmenüs und Auswahllisten
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Die Farbe und Schrift von Auswahllisten soll an die eigenen Bedürfnisse angepasst werden (siehe nächste Abbildung).
Lösung
Verwenden Sie einen Elementselektor, um dem select-Element die Stildefinitionen zuzuweisen:
select {
color: white;
background-color: blue;
font-size: 0.9em;
}
option {
padding: 4px;
}
Abbildung: Auswahlliste mit zugewiesenen Stildefinitionen.
Diskussion
Im Gegensatz zu Texteingabefeldern wird bei Aufklappmenüs und Auswahllisten in beiden Fällen das select-Element zur Definition verwendet. Daher ist in diesem Fall eine Zuweisung von Stilen nicht so schwer. Das Gleiche gilt für option-Elemente.
Wollen Sie den Optionen in einer Auswahlliste abwechselnd unterschiedliche Stile zuweisen, können Sie hierfür das option-Element mit dem Attribut class versehen:
<select name="Topping_ID" size="6" multiple>
<option value="1">Pepperoni</option>
<option value="2" class="even">Salami</option>
<option value="3">Grüne Paprika</option>
<option value="4" class="even">Ananas</option>
<option value="5">Hühnchen</option>
<option value="6" class="even">Schinken</option>
<option value="7">Oliven</option>
<option value="8" class="even">Zwiebeln</option>
<option value="9">Rote Paprika</option>
</select>Im nächsten Schritt legen Sie für jede der zwei Gruppen von option-Elementen jeweils eine CSS-Regel an. Dadurch erreichen Sie, dass die Optionen mit ungeraden Werten ein anderes Aussehen bekommen als die mit geraden Werten. So erhalten die Elemente mit dem class-Attribut even (gerade) einen roten Hintergrund, während die "normalen" Elemente einen blauen Hintergrund erhalten (siehe nächste Abbildung):
select {
font-size: 0.9em;
}
option {
color: white;
background-color: blue;
}
option.even {
color: blue;
background-color: red;
}
Abbildung: Sich abwechselnde Stile für die Optionen einer Auswahlliste.
Siehe auch
Das Rezept Stildefinitionen für Eingabeelemente für Informationen zum Ändern der Textfarbe und -größe von input-Elementen.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln