index,follow

CSS: Formatieren von input-Tags

19.09.2010, 17:41 von Daniel || (Kommentare: 0) || Mit anderen teilen

Was beim Kennzeichnen von Links mit Attributselektoren funktioniert, tut seinen Dienst natürlich auch bei anderen HTML-Tags. Ein weiteres hervorragendes Beispiel sind die Formularfelder für Text, Passwörter oder auch zum Absenden.

Durch die Attributselektoren kann man nun theoretisch auf Klassen zur Formatierung verzichten. Kann man - muss man aber nicht. Formulare können aus den verschiedensten Feldern bestehen. Wir haben da Textareas, Auswahllisten oder die unterschiedlichsten Input-Felder:

<input type="text" name="text" />
<input type="submit" value="Absenden" />
<input type="password" name="password" />
<input type="radio" name="select" />
<input type="checkbox" name="select2" />

Wenn wir nun CSS-Definitionen dafür schreiben, so müssen wir natürlich auf die unterschiedlichen input-Felder Rücksicht nehmen. Eine allgmeine Definition für alle input-Tags bringt uns da nicht ans Ziel:

input { width:200px; border:1px solid red; background-color:#EBEBEB }

Durch diese Angabe werden alle inputs mit einer Breite von 200 Pixeln, einem roten Rahmen und einer Hintergrundfarbe in hellgrau versehen. Wie das aussieht, zeigt das folgende Bild:

CSS: Formatieren von input-Tags

Die Unterschiede sind auf den ersten Blick zu erkennen. Ein Radio-Button oder eine Checkbox mit einer Breite von 200 Pixeln?!? Das kann nicht im Sinne des Erfinders sein. Also behelfen wir uns mit den Attributselektoren. Eine Angabe wie

input[type="text"] { width:200px; border:1px solid red; background-color:#EBEBEB }

spricht nun nur noch input-Felder vom Typ text an. Absende-Buttons sollen leicht abgeändert formatiert werden:

input[type="submit"] { width:auto; border:1px dotted red; background-color:#EBEBEB; cursor:pointer }

Die Breite richtet sich nach dem value-Wert, der Rahmen ist gepunktet und der Mousezeiger wird zum Zeiger, ähnlich eines Links.

Natürlich lassen sich diese Angaben auch auf bestimmte Bereiche auf der Seite eingrenzen. Sollen obige Angaben in Contao nur für den Formulargenerator oder die Kommentare gelten, so lassen sich folgende Klassen nutzen:

.ce_form input[type="text"], .ce_comments input[type="text"] { width:200px; ... }

Voila!

Schlüsselwörter zu diesem Beitrag

« Zurück

Hier schreibe ich,

Ich

Daniel Erlinger, als selbstständiger Webdesigner über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Vernetzt

Twitter
Mister Wong
Contao Community

Einen Kommentar schreiben



Nutze Deinen Gravatar.


Bitte addieren Sie 1 und 2.