Stildefinitionen für textarea-Elemente
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Mit Hilfe von Stildefinitionen sollen die Textfarbe, -größe und -gewichtung sowie weitere Eigenschaften eines textarea-Elements verändert werden (siehe folgende Abbildung).
Abbildung: Ein textarea-Element mit eigenen Stildefinitionen.
Lösung
Weisen Sie dem textarea-Element die Stile mit Hilfe eines Elementselektors zu:
textarea {
width: 300px;
height: 100px;
background-color: yellow;
font-size: 1em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 1px solid black;
}
Diskussion
Mit Elementselektoren ist es recht einfach, Stile für ein textarea-Element zuzuweisen:
textarea {
background-color: blue;
}
Wenn Sie dies zusätzlich um die Pseudoklasse :focus erweitern, können Sie außerdem einen eigenen Stil für das aktive textarea-Feld festlegen:
textarea:focus {
background-color: green;
}
Diese Regel bewirkt, dass sich die Hintergrundfarbe des textarea-Felds verändert, sobald der Benutzer beginnt, etwas hineinzuschreiben. Momentan wird :focus nur von Safari, Netscape Navigator 6+, Firefox und Opera 7+ unterstützt. Für die vielen Benutzer des Internet Explorers ist der in diesem Rezept beschriebene Effekt daher leider nicht sichtbar.
Siehe auch
Die CSS 2.1-Spezifikation zum Thema Elementselektoren.
<< 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