Mit CSS lassen sich Textfelder auf eine Vielfalt formatieren. Neue Hintergrundfarbe, anderer Rahmentyp, Festlegung der Schriftart und vieles mehr…
Zunächst wollen wir ein Textfeld generieren, welches einen
blauen Hintergrund hat, und einen weißen Rahmen. Wir benötigen
eine CSS-Definition, die wie folgt aussieht.
<input type="text" value="Textfelder"
style="border: 1 solid white; background-color: blue;">
Das Ergebnis auf schwarzen Hintergrund:
Verantwortlich für diese Veränderung ist das Styleattribut,
welches dem <input>-Tag hinzugefügt worden ist.
Für die Veränderung des Rahmens ist der Teil:
border: 1 solid white;
verantwortlich. In ihm wird angegeben, das der Rahmen, 1px stark
sein soll. Die zweite Angabe veranlasst, dass der Rahmen eine durchgezogene
(solid) weiße Linie sein soll.
Der Hintergrund:
background-color: blue;
Mit diesem Teil wird festgelegt, das die Hintergrundfarbe Blau
sein soll.
Das nächste Beispiel ist ein Textfeld mit rotem Hintergrund,
weißer Textfarbe, sowie einem gestrichelten Rahmen. Das Textfeld
muss wie folgt verändert werden:
<input type="text" value="Textfelder"
style="border: 1 dashed black; background-color: red; color:#FFFFFF">
Das Ergebnis, diesmal auf weißem Hintergrund:
Hier wurde für den Rahmen ein anderes Attribut verwendet. Der
Rahmen ist hier gestrichelt. Dies resultiert aus der Angabe border:
1 dashed black bei der Styledefinition. Zudem wurde eine Textfarbe,
mit dem Attribut color: #FFFFFF festgelegt.
Man kann auch den Text, welcher in das Feld eingegeben wird, formatieren.
Es soll festgelegt werden, das der Eingegebene Text von der Schriftart
Verdana ist, und dieser Text fettgedruckt sein soll.
Der Code sieht wie folgt aus:
<input type="text" value="Textfelder"
style="border: 1 dashed black; background-color: orange; color:#FFFFFF;
font-face:Verdana; font-weight:bold; font-size:8pt">
Das Ergebnis:
Die Definition wurde um einige Attribute erweitert. Für die
Textveränderung sind folgende Attribute verantwortlich:
color:#FFFFFF;
Gibt die Farbe der Schrift an.
font-face:Verdana;
Gibt die Schriftart an.
font-weight:bold;
Gibt an, das der Text fettgedruckt sein soll.
font-size:8pt
Gibt die Schriftgröße in Punkten an.