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.

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