Stildefinitionen für Buttons

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Für die Submit- und Reset-Buttons eines Formulars sollen Farbe, Innenabstände, Rahmen und Rollover-Effekte definiert werden. In der nächsten Abbildung sehen Sie das Formular ohne Stildefinitionen für die Buttons, in der übernächsten Abbildung mit Stildefinitionen.

Buttons ohne Stildefinitionen

Abbildung: Die Buttons ohne Stildefinitionen.

Buttons mit Stildefinitionen

Abbildung: Die Buttons mit Stildefinitionen.

Lösung

Die Buttons werden mit einem class-Attribut markiert, anhand dessen sie im Stylesheet ausgewählt werden können:

<form action="simplequiz.php" method="post">
  <label for="question">Wie heißt der Präsident der Vereinigten Staaten?</label>
  <input type="text" name="question" id="textfield" value="Hier Ihre Antwort eingeben" />
  <br />
  <input type="reset" name="reset" id="reset" value="Löschen" class="buttonReset" />
  <input type="submit" name="submit" value="Abschicken" class="buttonSubmit" />
</form>

Danach definieren Sie mit Hilfe von CSS die Stile für die Buttons:

.buttonReset {
 color: #fcc;
 background-color: #900;
 font-size: 1.5em;
 border: 1px solid #660;
 padding: 4px;
}
.buttonSubmit {
 color: white;
 background-color: #660;
 font-size: 1.5em;
 border: 1px solid #660;
 padding: 4px;
}

Diskussion

Zusätzlich sollen die Buttons noch mit JavaScript-Rollover-Effekten versehen werden:

<script language="JavaScript" type="text/javascript">function classChange(styleChange,item) { item.className = styleChange; }</script>

Anhand zweier zusätzlicher CSS-Regeln legen Sie die Stile für die Rollover-Effekte der beiden Buttons fest:

.buttonResetRoll {
 color: white;
 background-color: #c00;
 font-size: 1.5em;
 border: 1px solid #660;
 padding: 4px;
}
.buttonSubmitRoll {
 color: white;
 background-color: #cc0;
 font-size: 1.5em;
 border: 1px solid #660;
 padding: 4px;
}

Ist die Funktion einmal an ihrem Platz und sind die zusätzlichen CSS-Regeln definiert, müssen Sie die Funktionsaufrufe im Markup-Code für die Buttons platzieren, damit sich deren Erscheinungsbild nach Bedarf ändern kann (siehe folgende Abbildung):

<form action="simplequiz.php" method="post">
  <label for="question">Wie heißt der Präsident der Vereinigten Staaten?</label>
  <input type="text" name="question" id="textfield" value="Hier Ihre Antwort eingeben" />
  <br />
  <input type="reset" name="reset" id="reset" value="Löschen" class="buttonReset" onMouseOver="classChange('buttonResetRoll',this)" onMouseOut="classChange('buttonReset',this)" />
  <input type="submit" name="submit" value="Abschicken" class="buttonSubmit" onMouseOver="classChange('buttonSubmitRoll',this)" onMouseOut="classChange('buttonSubmit',this)" />
</form>

Ein mit CSS und JavaScript erzeugter Rollover-Effekt

Abbildung: Ein mit CSS und JavaScript erzeugter Rollover-Effekt.

Wie bereits gesagt, müssen Sie Klassenselektoren benutzen, solange Internet Explorer keine Attributselektoren unterstützt, wenn ein einheitliches Design gewährleistet werden soll. Wenn Sie Attributselektoren verwenden, kommen Sie dagegen ohne zusätzliches HTML-Markup für die Definition der Klassenzugehörigkeit aus. Beispielsweise würde die Stildefinition bei der Verwendung von Attributselektoren folgendermaßen aussehen:

input[type="reset"] {
 color: #fcc;
 background-color: #900;
 font-size: 1.5em;
 border: 1px solid #660;
 padding: 4px;
}
input[type="submit"] {
 color: white;
 background-color: #660;
 font-size: 1.5em;
 border: 1px solid #660;
 padding: 4px;
}

Zudem können Sie mit der Eigenschaft width die Breite des Buttons festlegen, allerdings unterstützt Internet Explorer 4.x für Windows diese Eigenschaft bei Formularen nicht.

Siehe auch

Das Rezept Grafische Rollover-Effekte zu CSS-basierten, grafischen Rollover-Effekten und die CSS 2.1-Spezifikation zu 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