Hintergrundfarbe und Textfarbe ändern bei Formularen

[Rene42]

Hi Leute,

seid neuestem soll unsere Webseite einen blauen Hintergrund haben. Nun sehen aber die Formulare nicht mehr so toll aus, da diese ja bei den Eingabefeldern (Textfelder und Inputboxen) immer weißen Hintergrund mit schwarzer Schrift hat. Wenn jemand weiß wie es geht wäre ein Beispiel für

<input type="Text" name="Test">

sehr nett.

 

[Maik]

Hi,

das SELFHTML-Kapitel Formulare formatieren mit CSS enthält die gewünschten Beispiele.

mfg Maik

 

[connexo]

Das CSS für blauen Hintergrund in input-Elementen sieht beispielhaft so aus:

input {
  background-color: #0000FF;
}

Allerdings betrifft das dann auch andere Input-Elemente (z.B. Submit-Buttons), nicht nur input type="text". Um nur die input-Elemente des Typs Text umzufärben, gibt es Attributselektoren:

input[type="text"] {
  background-color: #0000FF;
}

Diese beherrscht jedoch leider der IE 6 nicht. Daher weist man den nicht umzustylenden input-Elementen in der Regel eine eigene CSS-Klasse zu.

Sollen die Formularelemente die gleiche Hintergrundfarbe haben wie die Seite drumherum? Dann nimm

background-color: transparent;

Das hat auch den Vorteil, dass Du da nichts dran ändern musst, wenn nächste Woche Eure Seite gelb ist.

Analog kannst du die Breite und Farbe des Rahmens um die Formularelemente mit border-width und border-color, die Schriftfarbe mit color beeinflussen. Beispiel für rote Schrift und 2px breiten gelben Rahmen:

  border-width: 2px;
border-color: #00FF00;
color: #FF0000;

 

[Maik]

Allerdings betrifft das dann auch andere Input-Elemente (z.B. Submit-Buttons), nicht nur input type="text". Um nur die input-Elemente des Typs Text umzufärben, gibt es Attributselektoren:

input[type="text"] {
  background-color: #0000FF;
}

Diese beherrscht jedoch leider der IE 6 nicht.

In diesem Fall bietet es sich an, diese Elemente mit einer Klasse auszuzeichnen, um für sie im IE6 eine Fallunterscheidung zu den übrigen input-Typen vornehmen zu können, die diese CSS-Formatierung nicht erhalten sollen.

<input type="Text" name="Test" class="text">

input.text {
background:#0060ff; /* Hintergrundfarbe */
color:#fff; /* Schriftfarbe */
}

mfg Maik

 

[connexo]

Da viele Formulare größtenteils aus input type="text" bestehen, ist es oft ökonomischer, den von mir vorgeschlagenen, umgekehrten Weg zu gehen.

 

[Maik]

Ich hab hier eine gängige Lösung für den IE6 genannt, da er besagte Attribut-Selektoren nicht interpretiert, und du deinen Post in diesem Punkt erst nach meiner Antwort entsprechend editiert hast.

Und was an deiner nachträglich vorgeschlagenen Methode, alle übrigen input-Elemente, die nicht auf diese Weise formatiert werden sollen, und ebenso im Formular in der Überzahl vorhanden sein können, extra mit einer Klasse auszuzeichnen, ökonomischer und semantischer sein soll, kann ich ehrlich gesagt nicht nachvollziehen.

mfg Maik

 

[connexo]

Nimm ein typisches Kontaktformular:

Das hat Texteingabefelder für Name, Vorname, E-Mail-Adresse, Telefonnummer etc. Darunter in der Regel noch einen Submit-Button und evtl. (auch wenn selbst Jacob Nielsen mittlerweile von der Verwendung abrät) einen Reset-Button.

In diesem Fall musst Du nur ein oder zweimal eine Klasse setzen (z.b. class="button"), anstatt für jedes Textfeld.

Den von maik vorgeschlagenen Weg würde ich aber auch gehen, sobald z.b. auch Checkboxen, Radiobuttons und dergleichen mehr auftreten.