Verschiedene Stile für unterschiedliche Eingabeelemente des gleichen Formulars

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Die Eingabeelemente (input) des gleichen Formulars sollen mit unterschiedlichen Stildefinitionen versehen werden.

Lösung

Verwenden Sie zwei oder mehr Klassenselektoren, um die verschiedenen Stile zuzuweisen.

Hierfür müssen Sie zuerst die input-Elemente mit class-Attributen versehen:

<label for="fmname">Name</label>
<input type="text" name="fmname" class="fmname" />
<label for="fmemail">Email</label>
<input type="text" name="fmemail" class="fmemail" />

Danach können Sie die input-Elemente im Stylesheet über den Wert von class ansprechen:

.fmname {
 text-align: left;
}
.fmemail {
 text-align: center;
}

Diskussion

Die Technik, class-Attribute zu verwenden, um mehreren Elementen einer Seite die gleichen Stildefinitionen zuzuweisen, funktioniert in den meisten Browsern.

Eine weitere Methode, bestimmten Elementen eigene Stile zuzuweisen, kann für Browser angewandt werden, die die CSS 3-Spezifikation für Attributselektoren bereits verstehen, wie im Rezept Linkfarben anpassen besprochen.

Siehe auch

Das Rezept Stildefinitionen für Buttons für die Definition unterschiedlicher Stile für unterschiedliche Buttons im gleichen Formular.

  

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