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.
Abbildung: Die Buttons ohne 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>
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