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

Ein textarea-Element mit eigenen Stildefinitionen

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