Stildefinitionen für Formularelemente
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Formulare spielen eine wichtige Rolle in unserem täglichen Umgang mit dem Web. Daher wollen Designer möglichst auch auf die Darstellung der form-Elemente Einfluss nehmen. Leider gibt es immer noch große Unterschiede in der Standarddarstellung durch die verschiedenen Browser. Selbst wenn der gleiche Browser verwendet wird, kann es auf unterschiedlichen Betriebssystemen zu Inkonsistenzen kommen.
Um Ihnen bei der Gestaltung Ihrer Formulare zu helfen, finden Sie auf dieser Seite die Mehrzahl der visuellen CSS-Eigenschaften für form-Elemente und ihre Auswirkungen auf die Darstellung in den aktuellen Browsern.
Im ersten Teil (siehe folgende Tabelle) finden Sie die getesteten Eigenschaften und die dazugehörigen Werte.
Tabelle: Die Eigenschaften und die beim Testen der Formularelemente verwendeten Werte.
Eigenschaft | Wert |
---|---|
background-color | #ccff00; |
background-image | url(checkerboard_bkgd.gif); |
border | 0; |
border-color | 1px solid red; |
border-style | groove; |
border-width | 24px; |
color | #00ccff; |
font-family | Georgia, Times, 'Times New Roman', serif; |
font-size | 24px; |
font-weight | bold; |
height | 100px; |
letter-spacing | 24px; |
line-height | 1.5; |
margin | 24px; |
padding | 24px; |
text-align | right; |
text-decoration | underline; |
text-indent | 24px; |
width | 100px; |
word-spacing | 24px; |
Der zweite Teil (die folgenden Tabellen) befasst sich mit acht Formularelementen und damit, wie diese mit den 20 in der oberen Tabelle genannten Eigenschaften in 10 verschiedenen Browsern dargestellt werden.
- Informationen zu Checkboxen (<input type="checkbox" />) finden Sie in der Tabelle Eine Übersicht über die Verwendung von CSS-Eigenschaften für Checkboxen.
- Informationen zu Feldern für das Hochladen von Dateien (<input type="file" />) finden Sie in der Tabelle Eine Übersicht der CSS-Eigenschaften für Felder zum Hochladen von Dateien.
- Informationen zu Radio-Buttons (<input type="radio" />) finden Sie in der Tabelle Übersicht der CSS-Eigenschaften für Radio-Buttons.
- Informationen zu Feldern für die Texteingabe (<input type="text" />) finden Sie in der Tabelle Übersicht über die CSS-Eigenschaften für Texteingabefelder.
- Informationen zu Auswahllisten mit Mehrfachauswahl (<select multiple="multiple">…</select>) finden Sie in der Tabelle Übersicht über die CSS-Eigenschaften von Auswahllisten mit Mehrfachauswahl.
- Informationen zu Auswahllisten mit Einfachauswahl (<select>…</select>) finden Sie in der Tabelle Übersicht über die CSS-Eigenschaften von Auswahllisten mit Einfachauswahl.
- Informationen zu Submit-Buttons (<input type="submit" />) finden Sie in der Tabelle Übersicht über die CSS-Eigenschaften für Submit-Buttons.
- Informationen zu mehrzeiligen Eingabebereichen (<textarea>…</textarea>) finden Sie in der Tabelle Übersicht über die CSS-Eigenschaften für mehrzeilige Eingabebereiche.
Die in den folgenden Tabellen verwendeten Werte lauten NV, J, N und T.
Hierbei steht NV für Nicht verfügbar – die CSS-Eigenschaft kann also nicht auf das betreffende Formularelement angewendet werden. J heißt Ja – die betreffende CSS-Eigenschaft wird korrekt auf das Element angewendet. Nsteht für Nein, was bedeutet, dass der Wert der Eigenschaft nicht auf das Element angewendet wird. T steht für Teilweise – diese CSS-Eigenschaft wird nur teilweise auf das Element angewendet.
Hinweis:
Der Wert Teilweise bezeichnet ungewöhnliche Situationen. Es gibt Teile der Spezifikationen für HTML und CSS, die für bestimmte Fälle kein besonderes Verhalten definieren. Daher ist es nicht immer möglich zu ermitteln, ob eine CSS-Regel korrekt angewendet wird oder nicht.
So verbreitert Firefox beim Einsatz der Eigenschaft letter-spacing sowohl die Breite des Eingabefeldes wie auch die Zwischenräume zwischen den Buchstaben.
In diesem Fall könnte das Problem daher rühren, dass Firefox die Standardbreite des Eingabefeldes anhand einer bestimmten Anzahl von Buchstaben berechnet, während andere Browser die Breite anhand eines vordefinierten Wertes oder einer unbestimmten Anzahl von Buchstaben bei einer bestimmten Schriftgröße des Eingabefeldes berechnen.
Tabelle: Eine Übersicht über die Verwendung von CSS-Eigenschaften für Checkboxen.
WinIE5 | WinIE5.5 | WinIE6 | WinIE7 | Safari2 | WinFF1.5 | MacFF1.5 | WinNN7.2 | MacNN7.2 | MacNN7.2 Op8.5 | |
---|---|---|---|---|---|---|---|---|---|---|
background-color | T | T | T | T | N | N | N | N | N | J |
background-image | T | T | T | T | N | N | N | N | N | J |
border | N | N | N | N | N | N | N | N | N | N |
border-color | T | T | T | T | N | N | N | N | N | J |
border-style | T | T | T | T | N | N | N | N | N | J |
border-width | N | N | N | N | N | N | N | N | N | N |
color | N | N | N | N | N | N | N | N | N | N |
font-family | NV | NV | NV | NV | NV | NV | NV | NV | NV | NV |
font-size | N | N | N | N | N | N | N | N | N | N |
font-weight | N | N | N | N | N | N | N | N | N | N |
height | T | T | T | N | N | T | J | T | J | N |
letter-spacing | NV | NV | NV | NV | NV | NV | NV | NV | NV | NV |
line-height | N | N | N | N | N | N | N | N | N | N |
margin | J | J | J | J | J | J | J | J | J | J |
padding | N | N | N | N | N | N | N | N | N | J |
text-align | NV | NV | NV | NV | NV | NV | NV | NV | NV | NV |
text-decoration | NV | NV | NV | NV | NV | NV | NV | NV | NV | NV |
text-indent | J | J | J | T | N | N | N | N | N | N |
width | T | T | T | T | T | T | J | T | J | T |
word-spacing | NV | NV | NV | NV | NV | NV | NV | NV | NV | NV |
Tabelle: Eine Übersicht der CSS-Eigenschaften für Felder zum Hochladen von Dateien.
WinIE5 | WinIE5.5 | WinIE6 | WinIE7 | Safari2 | WinFF1.5 | MacFF1.5 | WinNN7.2 | MacNN7.2 | MacNN7.2 Op8.5 | |
---|---|---|---|---|---|---|---|---|---|---|
background-color | J | J | J | J | N | J | J | J | J | N |
background-image | J | J | J | J | N | N | N | N | N | N |
border | J | T | J | J | N | N | N | N | N | N |
border-color | J | J | J | J | N | J | J | J | J | J |
border-style | J | J | J | J | N | N | N | N | N | J |
border-width | J | J | J | J | N | N | N | N | N | T |
color | N | N | N | N | N | N | N | N | N | N |
font-family | N | N | N | N | N | N | N | N | N | J |
font-size | J | J | J | J | N | J | J | J | J | J |
font-weight | N | N | N | N | N | N | N | N | N | J |
height | J | J | J | J | N | J | J | J | J | J |
letter-spacing | N | N | N | N | N | N | T | N | N | N |
line-height | N | N | N | N | N | N | N | N | N | N |
margin | J | J | J | J | J | J | J | J | J | J |
padding | J | J | J | J | N | N | N | N | N | J |
text-align | N | N | N | N | N | T | T | T | T | N |
text-decoration | N | N | N | N | N | N | N | N | N | N |
text-indent | J | J | J | J | N | J | J | J | J | N |
width | J | J | J | J | J | T | T | T | T | J |
word-spacing | N | N | N | N | N | N | T | N | T | N |
Tabelle: Übersicht der CSS-Eigenschaften für Radio-Buttons.
WinIE5 | WinIE5.5 | WinIE6 | WinIE7 | Safari2 | WinFF1.5 | MacFF1.5 | WinNN7.2 | MacNN7.2 | MacNN7.2 Op8.5 | |
---|---|---|---|---|---|---|---|---|---|---|
background-color | T | T | T | T | N | N | N | N | N | J |
background-image | T | T | T | T | N | N | T | N | T | T |
border | N | N | N | N | N | N | N | N | N | N |
border-color | T | T | T | T | N | N | N | N | N | T |
border-style | T | T | T | T | N | N | N | N | N | T |
border-width | N | N | N | N | N | N | N | N | N | N |
color | N | N | N | N | N | N | N | N | N | N |
font-family | NV | NV | NV | NV | NV | NV | NV | NV | NV | NV |
font-size | N | N | N | N | N | N | N | N | N | N |
font-weight | NV | NV | NV | NV | NV | NV | NV | NV | NV | NV |
height | T | T | T | T | N | N | J | T | J | T |
letter-spacing | NV | NV | NV | NV | NV | NV | NV | NV | NV | NV |
line-height | N | N | N | N | N | N | N | N | N | N |
margin | J | J | J | J | J | J | J | J | J | J |
padding | N | N | N | N | N | N | N | N | N | T |
text-align | NV | NV | NV | NV | NV | NV | NV | NV | NV | NV |
text-decoration | NV | NV | NV | NV | NV | NV | NV | NV | NV | NV |
text-indent | J | J | J | T | N | N | N | N | N | N |
width | T | T | T | T | T | N | J | T | J | T |
word-spacing | NV | NV | NV | NV | NV | NV | NV | NV | NV | NV |
Tabelle: Übersicht über die CSS-Eigenschaften für Texteingabefelder.
WinIE5 | WinIE5.5 | WinIE6 | WinIE7 | Safari2 | WinFF1.5 | MacFF1.5 | WinNN7.2 | MacNN7.2 | MacNN7.2 Op8.5 | |
---|---|---|---|---|---|---|---|---|---|---|
background-color | J | J | J | J | J | J | J | J | J | J |
background-image | J | J | J | J | N | J | J | J | J | J |
border | J | J | J | J | N | J | J | J | J | J |
border-color | J | J | J | J | N | J | J | J | J | J |
border-style | J | J | J | J | N | J | J | J | J | J |
border-width | J | J | J | J | N | J | J | J | J | N |
color | J | J | J | J | J | J | J | J | J | J |
font-family | J | J | J | J | J | J | J | J | J | J |
font-size | J | J | J | J | J | J | J | J | J | J |
font-weight | J | J | J | J | J | J | J | J | J | J |
height | J | J | J | J | N | J | J | J | J | T |
letter-spacing | J | J | J | J | N | T | T | J | J | J |
line-height | N | N | N | N | N | N | N | N | N | N |
margin | J | J | J | J | J | J | J | J | J | J |
padding | J | T | J | J | N | J | J | J | J | T |
text-align | N | N | N | N | N | N | N | N | N | N |
text-decoration | J | J | J | J | N | J | J | J | J | N |
text-indent | T | T | T | T | N | J | J | J | J | N |
width | J | J | J | J | J | J | J | J | J | J |
word-spacing | N | N | J | J | N | J | J | J | J | N |
Tabelle: Übersicht über die CSS-Eigenschaften von Auswahllisten mit Mehrfachauswahl.
WinIE5 | WinIE5.5 | WinIE6 | WinIE7 | Safari2 | WinFF1.5 | MacFF1.5 | WinNN7.2 | MacNN7.2 | MacNN7.2 Op8.5 | |
---|---|---|---|---|---|---|---|---|---|---|
background-color | J | J | J | J | N | J | J | J | J | J |
background-image | N | N | N | N | N | J | J | J | J | N |
border | N | N | N | N | N | J | J | N | N | J |
border-color | N | N | N | N | N | J | J | N | T | J |
border-style | N | N | N | N | N | J | J | N | N | J |
border-width | N | N | N | N | N | J | J | N | N | N |
color | J | J | J | J | N | J | J | J | J | J |
font-family | J | J | J | J | J | J | J | J | J | J |
font-size | J | J | J | J | J | J | J | J | J | J |
font-weight | J | J | J | J | J | J | J | J | J | J |
height | T | T | T | T | J | J | J | J | J | J |
letter-spacing | N | N | N | N | N | T | T | T | T | T |
line-height | N | N | N | N | N | N | N | N | N | N |
margin | J | J | J | J | J | J | J | J | J | J |
padding | N | N | N | N | N | J | J | J | J | N |
text-align | N | N | N | N | N | J | J | J | J | J |
text-decoration | J | J | J | N | N | N | N | N | N | |
text-indent | T | T | T | T | N | N | N | N | N | N |
width | J | J | J | J | J | J | J | J | J | J |
word-spacing | N | N | N | N | N | T | T | T | T | N |
Tabelle: Übersicht über die CSS-Eigenschaften von Auswahllisten mit Einfachauswahl.
WinIE5 | WinIE5.5 | WinIE6 | WinIE7 | Safari2 | WinFF1.5 | MacFF1.5 | WinNN7.2 | MacNN7.2 | MacNN7.2 Op8.5 | |
---|---|---|---|---|---|---|---|---|---|---|
background-color | J | J | J | J | N | J | J | J | J | J |
background-image | N | N | N | N | N | N | N | N | N | N |
border | N | N | N | N | N | J | J | N | N | J |
border-color | N | N | N | N | N | J | J | N | T | J |
border-style | N | N | N | N | N | J | J | N | N | J |
border-width | N | N | N | N | N | J | J | N | N | N |
color | J | J | J | J | N | J | J | J | J | J |
font-family | J | J | J | J | N | J | J | J | J | J |
font-size | J | J | J | J | N | J | J | J | J | J |
font-weight | J | J | J | J | N | J | J | J | J | J |
height | N | N | N | N | N | T | T | T | T | J |
letter-spacing | N | N | N | N | N | J | J | J | J | J |
line-height | N | N | N | N | N | N | N | N | N | N |
margin | J | J | J | J | J | J | J | J | J | J |
padding | N | N | N | N | N | J | J | J | J | N |
text-align | N | N | N | N | N | J | J | J | J | N |
text-decoration | J | J | J | J | N | N | N | N | N | N |
text-indent | T | T | T | T | N | J | J | J | J | N |
width | J | J | J | J | J | J | J | J | J | J |
word-spacing | N | N | N | N | N | J | J | J | J | J |
Tabelle: Übersicht über die CSS-Eigenschaften für Submit-Buttons.
WinIE5 | WinIE5.5 | WinIE6 | WinIE7 | Safari2 | WinFF1.5 | MacFF1.5 | WinNN7.2 | MacNN7.2 | MacNN7.2 Op8.5 | |
---|---|---|---|---|---|---|---|---|---|---|
background-color | J | J | J | J | N | J | J | J | J | J |
background-image | J | J | N | N | N | J | J | J | J | J |
border | J | J | J | J | N | J | J | J | J | J |
border-color | J | J | J | J | N | J | J | J | J | J |
border-style | J | J | J | J | N | J | J | J | J | J |
border-width | J | J | J | J | N | J | J | J | J | N |
color | J | J | J | J | N | J | J | J | J | J |
font-family | J | J | J | J | N | J | J | J | J | J |
font-size | J | J | J | J | N | J | J | J | J | J |
font-weight | J | J | J | J | N | J | J | J | J | J |
height | J | J | J | J | N | J | J | J | J | J |
letter-spacing | J | J | J | J | N | J | J | J | J | J |
line-height | N | N | N | N | N | N | N | N | N | N |
margin | J | J | J | J | J | J | J | J | J | J |
padding | J | J | J | J | N | J | J | J | J | J |
text-align | N | N | J | J | N | N | N | N | N | J |
text-decoration | J | J | J | J | N | N | N | N | N | N |
text-indent | T | T | T | T | N | J | J | J | J | N |
width | J | J | J | J | J | J | J | J | J | J |
word-spacing | N | N | J | J | N | J | J | J | J | N |
Tabelle: Übersicht über die CSS-Eigenschaften für mehrzeilige Eingabebereiche.
WinIE5 | WinIE5.5 | WinIE6 | WinIE7 | Safari2 | WinFF1.5 | MacFF1.5 | WinNN7.2 | MacNN7.2 | MacNN7.2 Op8.5 | |
---|---|---|---|---|---|---|---|---|---|---|
background-color | J | J | J | J | N | J | J | J | J | J |
background-image | J | J | N | N | N | J | J | J | J | J |
border | J | J | J | J | N | J | J | J | J | J |
border-color | J | J | J | J | N | J | J | J | J | J |
border-style | J | J | J | J | n | J | J | J | J | J |
border-width | J | J | J | J | N | J | J | J | J | N |
color | J | J | J | J | N | J | J | J | J | J |
font-family | J | J | J | J | N | J | J | J | J | J |
font-size | J | J | J | J | N | J | J | J | J | J |
font-weight | J | J | J | J | N | J | J | J | J | J |
height | J | J | J | J | N | J | J | J | J | J |
letter-spacing | J | J | J | J | N | J | J | J | J | J |
line-height | N | N | N | N | N | N | N | N | N | N |
margin | J | J | J | J | J | J | J | J | J | J |
padding | J | J | J | J | N | J | J | J | J | J |
text-align | N | N | J | J | N | N | N | N | N | J |
text-decoration | J | J | J | J | N | N | N | N | N | N |
text-indent | T | T | T | T | N | J | J | J | J | N |
width | J | J | J | J | J | J | J | J | J | J |
word-spacing | N | N | J | J | N | J | J | J | J | N |
<< 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