Stildefinitionen für Eingabeelemente

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Die Hintergrundfarbe der Eingabeelemente soll angepasst werden.

Lösung

Versehen Sie die gewünschten Eingabeelemente mit einem class-Attribut, und wählen Sie diese im CSS-Code über einen Klassenselektor aus, um die Stile zuzuweisen:

<h2>Einfaches Quiz</h2>
<form action="simplequiz.php" method="post">
  <p>Sind Sie <input type="radio" value="male" name="sex" class="radioinput"> männlich oder <input type="radio" value="female" name="sex" class="radioinput"> weiblich?</p>
  <p>Welche Zutaten sollen auf Ihre Pizza? <input type="checkbox" name="" value="l" class="checkbxinput"> Pepperoni <input type="checkbox" name="" value="mushrooms" class="checkbxinput"> Pilze <input type="checkbox" name="" value="pineapple" class="checkbxinput"> Ananas</p>
  <label for="question1">Wer ist in Grants Grabmal beerdigt?</label>
  <input type="text" name="question1" id="question1" class="textinput" value="Geben Sie hier Ihre Antwort ein" /><br />
  <label for="question2">In welchem Land befindet sich die chinesische Mauer?</label>
  <input type="text" name="question2" id="question2" class="textinput" value="Geben Sie hier Ihre Antwort ein" /><br />
  <label for="password">Wie lautet Ihr Passwort?</label>
  <input type="password" name="password" id="password" class="pwordinput" value="" />
  <br />
  <input name="reset" type="reset" id="reset" value="Eingaben l&ouml;schen" />
  <input type="submit" name="Submit" value="Abschicken" class="buttonSubmit" />
</form>

Danach verwenden Sie die folgenden CSS-Regeln, um die Präsentation der Eingabeelemente an Ihre Bedürfnisse anzupassen:

.textinput {
 margin-bottom: 1.5em;
 width: 50%;
 color: #666;
 background-color: #ccc;
}
.pwordinput {
 color: white;
 background-color: white;
}
.radioinput {
 color: green;
 background-color: #ccc;
}
.checkbxinput {
 color: green;
 background-color: green;
}

Eingabefelder mit Stildefinitionen

Abbildung: Eingabefelder mit Stildefinitionen.

Diskussion

Der momentan einzige Browser, bei dem auch Radio-Buttons und Optionsfelder mit Farben versehen werden können, ist Opera. Mozilla bietet überhaupt keine Farbunterstützung für diese Elemente, während Internet Explorer für Windows die Vordergrundfarbe ignoriert und für Bereiche um die Elemente die Hintergrundfarbe verwendet (siehe folgende Abbildung).

Im Internet Explorer wird Hintergrundfarbe verwendet, um Bereich um Ankreuzfelder einzufärben

Abbildung: Im Internet Explorer wird die Hintergrundfarbe verwendet, um den Bereich um die Ankreuzfelder einzufärben.

Statt über Klassenselektoren lassen sich verschiedene Arten von Eingabefeldern auch mit Hilfe von Attributselektoren auswählen.

Wenn Sie Attribut-Selektoren verwenden, können Sie auf die Vewendung der class-Attribute im HTML-Code verzichten. Stattdessen verwenden Sie folgende Definitionen:

input[type="text"] {
 margin-bottom: 1.5em;
 width: 50%;
 color: #666;
 background-color: #ccc;
}
input[type="password"] {
 color: white;
 background-color: white;
}

Auch wenn diese Art der Auswahl in den meisten Browsern recht gut funktioniert, fehlt in Internet Explorer für Windows die Unterstützung für Attributselektoren vollkommen. Momentan werden Attributselektoren von Netscape Navigator 6+, Firefox, Safari und Opera 5+ unterstützt. Wollen Sie eine browserübergreifende Lösung, um Stile für verschiedene Formularelemente zu definieren, sollten Sie daher auf Klassenselektoren zurückgreifen.

Siehe auch

Stildefinitionen für Formularelemente und die CSS 2.1-Spezifikation zum Thema Attributselektoren.

  

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