CSS - Textfelder formatierenMit 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.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: