CSS-Eigenschaftskompatibilitätstabelle für Formularelemente
Die folgenden Kompatibilitätstabellen versuchen, den Stand der CSS-Unterstützung für HTML-Formulare zusammenzufassen. Aufgrund der Komplexität von CSS und HTML-Formularen können diese Tabellen nicht als perfekte Referenz angesehen werden. Sie geben Ihnen jedoch einen guten Einblick, was getan werden kann und was nicht, und helfen Ihnen zu lernen, wie man Dinge umsetzen kann.
Anleitung zum Lesen der Tabellen
Werte
Für jede Eigenschaft gibt es vier mögliche Werte:
- ✅ Ja
-
Es gibt eine vernünftige Konsistenz in der Unterstützung der Eigenschaft in verschiedenen Browsern. Sie könnten dennoch in bestimmten Randfällen auf merkwürdige Nebeneffekte stoßen.
- ⚠️ Teilweise
-
Während die Eigenschaft funktioniert, können Sie häufig auf merkwürdige Nebeneffekte oder Inkonsistenzen stoßen. Sie sollten diese Eigenschaften wahrscheinlich meiden, es sei denn, Sie beherrschen zuerst diese Nebenwirkungen.
- ❌ Nein
-
Die Eigenschaft funktioniert nicht oder ist so inkonsistent, dass sie nicht zuverlässig ist.
- n.a.
-
Die Eigenschaft hat keine Bedeutung für diesen Typ von Widget.
Darstellung
Für jede Eigenschaft gibt es zwei mögliche Darstellungen:
- N (Normal)
-
Zeigt an, dass die Eigenschaft wie sie ist angewendet wird
- T (Gepimpt)
-
Zeigt an, dass die Eigenschaft mit der folgenden zusätzlichen Regel angewendet wird:
* {
/* Turn off the native look and feel */
appearance: none;
}
Kompatibilitätstabellen
Das Ändern des Aussehens von Formularelementen mit CSS, wie mit border
, background
, border-radius
und height
, kann das native Aussehen & Gefühl der Widgets in einigen Browsern teilweise oder vollständig ausschalten. Seien Sie vorsichtig, wenn Sie sie verwenden.
Texteingabefelder
Siehe die text
, search
und password
Eingabetypen.
Eigenschaft | N | T | Hinweis |
---|---|---|---|
CSS-Boxmodell | |||
width |
✅ Ja | ✅ Ja | |
height |
⚠️ Teilweise[1] | ✅ Ja |
|
border |
⚠️ Teilweise[1] | ✅ Ja |
|
margin |
✅ Ja | ✅ Ja | |
padding |
⚠️ Teilweise[1] | ✅ Ja |
|
Text und Schrift | |||
color [1] |
✅ Ja | ✅ Ja |
|
font |
✅ Ja | ✅ Ja | Siehe die Anmerkung über line-height |
letter-spacing |
✅ Ja | ✅ Ja | |
text-align |
✅ Ja | ✅ Ja | |
text-decoration |
⚠️ Teilweise | ⚠️ Teilweise | Siehe die Anmerkung zu Opera |
text-indent |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
text-overflow |
⚠️ Teilweise | ⚠️ Teilweise | |
text-shadow |
⚠️ Teilweise | ⚠️ Teilweise | |
text-transform |
✅ Ja | ✅ Ja | |
Rand und Hintergrund | |||
background |
⚠️ Teilweise[1] | ✅ Ja |
|
border-radius |
⚠️ Teilweise[1] | ✅ Ja |
|
box-shadow |
❌ Nein | ⚠️ Teilweise[1] |
|
Schaltflächen
Siehe die button
, submit
, und reset
Eingabetypen und das
Element.<button>
Eigenschaft | N | T | Hinweis |
---|---|---|---|
CSS-Boxmodell | |||
width |
✅ Ja | ✅ Ja | |
height |
⚠️ Teilweise[1] | ✅ Ja |
|
border |
⚠️ Teilweise | ✅ Ja | |
margin |
✅ Ja | ✅ Ja | |
padding |
⚠️ Teilweise[1] | ✅ Ja |
|
Text und Schrift | |||
color |
✅ Ja | ✅ Ja | |
font |
✅ Ja | ✅ Ja | Siehe die Anmerkung über line-height . |
letter-spacing |
✅ Ja | ✅ Ja | |
text-align |
❌ Nein | ❌ Nein | |
text-decoration |
⚠️ Teilweise | ✅ Ja | |
text-indent |
✅ Ja | ✅ Ja | |
text-overflow |
❌ Nein | ❌ Nein | |
text-shadow |
⚠️ Teilweise | ⚠️ Teilweise | |
text-transform |
✅ Ja | ✅ Ja | |
Rand und Hintergrund | |||
background |
✅ Ja | ✅ Ja | |
border-radius |
✅ Ja[1] | ✅ Ja[1] |
|
box-shadow |
❌ Nein | ⚠️ Teilweise[1] |
|
Nummer
Siehe den number
Eingabetyp. Es gibt keine standardisierte Möglichkeit, das Aussehen der Spinner zu ändern, die zum Ändern des Werts des Felds verwendet werden, wobei sich die Spinner in Safari außerhalb des Feldes befinden.
Eigenschaft | N | T | Hinweis |
---|---|---|---|
CSS-Boxmodell | |||
width |
✅ Ja | ✅ Ja | |
height |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
border |
✅ Ja | ✅ Ja | |
margin |
✅ Ja | ✅ Ja | |
padding |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
Text und Schrift | |||
color |
✅ Ja | ✅ Ja | |
font |
✅ Ja | ✅ Ja | Siehe die Anmerkung über line-height . |
letter-spacing |
✅ Ja | ✅ Ja | |
text-align |
✅ Ja | ✅ Ja | |
text-decoration |
⚠️ Teilweise | ⚠️ Teilweise | |
text-indent |
✅ Ja | ✅ Ja | |
text-overflow |
❌ Nein | ❌ Nein | |
text-shadow |
⚠️ Teilweise | ⚠️ Teilweise | |
text-transform |
n.a. | n.a. | |
Rand und Hintergrund | |||
background |
❌ Nein | ❌ Nein |
Unterstützt, aber es gibt zu viele Inkonsistenzen zwischen Browsern, um verlässlich zu sein. |
border-radius |
❌ Nein | ❌ Nein | |
box-shadow |
❌ Nein | ❌ Nein |
Kontrollkästchen und Radio-Buttons
Siehe die checkbox
und radio
Eingabetypen.
Eigenschaft | N | T | Hinweis |
---|---|---|---|
CSS-Boxmodell | |||
width |
❌ Nein[1] | ❌ Nein[1] |
|
height |
❌ Nein[1] | ❌ Nein[1] |
|
border |
❌ Nein | ❌ Nein | |
margin |
✅ Ja | ✅ Ja | |
padding |
❌ Nein | ❌ Nein | |
Text und Schrift | |||
color |
n.a. | n.a. | |
font |
n.a. | n.a. | |
letter-spacing |
n.a. | n.a. | |
text-align |
n.a. | n.a. | |
text-decoration |
n.a. | n.a. | |
text-indent |
n.a. | n.a. | |
text-overflow |
n.a. | n.a. | |
text-shadow |
n.a. | n.a. | |
text-transform |
n.a. | n.a. | |
Rand und Hintergrund | |||
background |
❌ Nein | ❌ Nein | |
border-radius |
❌ Nein | ❌ Nein | |
box-shadow |
❌ Nein | ❌ Nein |
Auswahllisten (einzeilig)
Siehe die
, <select>
und <optgroup>
Elemente.<option>
Eigenschaft | N | T | Hinweis |
---|---|---|---|
CSS-Boxmodell | |||
width |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
height |
❌ Nein | ✅ Ja | |
border |
⚠️ Teilweise | ✅ Ja | |
margin |
✅ Ja | ✅ Ja | |
padding |
❌ Nein[1] | ⚠️ Teilweise[2] |
|
Text und Schrift | |||
color |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
font |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
letter-spacing |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
text-decoration |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
text-indent |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
text-overflow |
❌ Nein | ❌ Nein | |
text-shadow |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
text-transform |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
Rand und Hintergrund | |||
background |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
border-radius |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] | |
box-shadow |
❌ Nein | ⚠️ Teilweise[1] |
Beachten Sie, dass Firefox keine Möglichkeit bietet, den Abwärtspfeil auf dem
Element zu ändern.<select>
Dropdown-Felder (mehrzeilig)
Sehen Sie sich die
, <select>
und <optgroup>
Elemente und das <option>
size
Attribut an.
Eigenschaft | N | T | Hinweis |
---|---|---|---|
CSS-Box-Modell | |||
width |
✅ Ja | ✅ Ja | |
height |
✅ Ja | ✅ Ja | |
border |
✅ Ja | ✅ Ja | |
margin |
✅ Ja | ✅ Ja | |
padding |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
Text und Schriftart | |||
color |
✅ Ja | ✅ Ja | |
font |
✅ Ja | ✅ Ja | Siehe den Hinweis zur line-height . |
letter-spacing |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
text-align |
❌ Nein[1] | ❌ Nein[1] |
|
text-decoration |
❌ Nein[1] | ❌ Nein[1] |
|
text-indent |
❌ Nein | ❌ Nein | |
text-overflow |
❌ Nein | ❌ Nein | |
text-shadow |
❌ Nein | ❌ Nein | |
text-transform |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
Rand und Hintergrund | |||
background |
✅ Ja | ✅ Ja | |
border-radius |
✅ Ja[1] | ✅ Ja[1] |
|
box-shadow |
❌ Nein | ⚠️ Teilweise[1] |
|
Datenliste
Sehen Sie sich die
- und <datalist>
-Elemente und das <input>
list
Attribut an.
Eigenschaft | N | T | Hinweis |
---|---|---|---|
CSS-Box-Modell | |||
width |
❌ Nein | ❌ Nein | |
height |
❌ Nein | ❌ Nein | |
border |
❌ Nein | ❌ Nein | |
margin |
❌ Nein | ❌ Nein | |
padding |
❌ Nein | ❌ Nein | |
Text und Schriftart | |||
color |
❌ Nein | ❌ Nein | |
font |
❌ Nein | ❌ Nein | |
letter-spacing |
❌ Nein | ❌ Nein | |
text-align |
❌ Nein | ❌ Nein | |
text-decoration |
❌ Nein | ❌ Nein | |
text-indent |
❌ Nein | ❌ Nein | |
text-overflow |
❌ Nein | ❌ Nein | |
text-shadow |
❌ Nein | ❌ Nein | |
text-transform |
❌ Nein | ❌ Nein | |
Rand und Hintergrund | |||
background |
❌ Nein | ❌ Nein | |
border-radius |
❌ Nein | ❌ Nein | |
box-shadow |
❌ Nein | ❌ Nein |
Dateiauswahl
Sehen Sie sich den file
Eingabetyp an.
Eigenschaft | N | T | Hinweis |
---|---|---|---|
CSS-Box-Modell | |||
width |
❌ Nein | ❌ Nein | |
height |
❌ Nein | ❌ Nein | |
border |
❌ Nein | ❌ Nein | |
margin |
✅ Ja | ✅ Ja | |
padding |
❌ Nein | ❌ Nein | |
Text und Schriftart | |||
color |
✅ Ja | ✅ Ja | |
font |
❌ Nein[1] | ❌ Nein[1] |
|
letter-spacing |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
text-align |
❌ Nein | ❌ Nein | |
text-decoration |
❌ Nein | ❌ Nein | |
text-indent |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
text-overflow |
❌ Nein | ❌ Nein | |
text-shadow |
❌ Nein | ❌ Nein | |
text-transform |
❌ Nein | ❌ Nein | |
Rand und Hintergrund | |||
background |
❌ Nein[1] | ❌ Nein[1] |
|
border-radius |
❌ Nein | ❌ Nein | |
box-shadow |
❌ Nein | ⚠️ Teilweise[1] |
|
Datumsauswahl
Sehen Sie sich die date
und time
Eingabetypen an. Viele Eigenschaften werden unterstützt, aber es gibt zu viele Inkonsistenzen zwischen den Browsern, um zuverlässig zu sein.
Eigenschaft | N | T | Hinweis |
---|---|---|---|
CSS-Box-Modell | |||
width |
❌ Nein | ❌ Nein | |
height |
❌ Nein | ❌ Nein | |
border |
❌ Nein | ❌ Nein | |
margin |
✅ Ja | ✅ Ja | |
padding |
❌ Nein | ❌ Nein | |
Text und Schriftart | |||
color |
❌ Nein | ❌ Nein | |
font |
❌ Nein | ❌ Nein | |
letter-spacing |
❌ Nein | ❌ Nein | |
text-align |
❌ Nein | ❌ Nein | |
text-decoration |
❌ Nein | ❌ Nein | |
text-indent |
❌ Nein | ❌ Nein | |
text-overflow |
❌ Nein | ❌ Nein | |
text-shadow |
❌ Nein | ❌ Nein | |
text-transform |
❌ Nein | ❌ Nein | |
Rand und Hintergrund | |||
background |
❌ Nein | ❌ Nein | |
border-radius |
❌ Nein | ❌ Nein | |
box-shadow |
❌ Nein | ❌ Nein |
Farbauswahl
Sehen Sie sich den color
Eingabetyp an:
Eigenschaft | N | T | Hinweis |
---|---|---|---|
CSS-Box-Modell | |||
width |
✅ Ja | ✅ Ja | |
height |
❌ Nein[1] | ✅ Ja |
|
border |
✅ Ja | ✅ Ja | |
margin |
✅ Ja | ✅ Ja | |
padding |
❌ Nein[1] | ✅ Ja |
|
Text und Schriftart | |||
color |
N.A. | N.A. | |
font |
N.A. | N.A. | |
letter-spacing |
N.A. | N.A. | |
text-align |
N.A. | N.A. | |
text-decoration |
N.A. | N.A. | |
text-indent |
N.A. | N.A. | |
text-overflow |
N.A. | N.A. | |
text-shadow |
N.A. | N.A. | |
text-transform |
N.A. | N.A. | |
Rand und Hintergrund | |||
background |
❌ Nein[1] | ❌ Nein[1] |
|
border-radius |
❌ Nein[1] | ❌ Nein[1] | |
box-shadow |
❌ Nein[1] | ❌ Nein[1] |
Messgeräte und Fortschrittsbalken
Sehen Sie sich die
und <meter>
Elemente an:<progress>
Eigenschaft | N | T | Hinweis |
---|---|---|---|
CSS-Box-Modell | |||
width |
✅ Ja | ✅ Ja | |
height |
✅ Ja | ✅ Ja | |
border |
⚠️ Teilweise | ✅ Ja | |
margin |
✅ Ja | ✅ Ja | |
padding |
✅ Ja | ⚠️ Teilweise[1] |
|
Text und Schriftart | |||
color |
N.A. | N.A. | |
font |
N.A. | N.A. | |
letter-spacing |
N.A. | N.A. | |
text-align |
N.A. | N.A. | |
text-decoration |
N.A. | N.A. | |
text-indent |
N.A. | N.A. | |
text-overflow |
N.A. | N.A. | |
text-shadow |
N.A. | N.A. | |
text-transform |
N.A. | N.A. | |
Rand und Hintergrund | |||
background |
❌ Nein[1] | ❌ Nein[1] |
|
border-radius |
❌ Nein[1] | ❌ Nein[1] | |
box-shadow |
❌ Nein[1] | ❌ Nein[1] |
Bereich
Siehe den range
Eingabetyp. Es gibt keinen Standardweg, um den Stil des Bereichsgriffs zu ändern, und Opera bietet keine Möglichkeit, das Standard-Rendering des Bereichs-Widgets zu ändern.
Eigenschaft | N | T | Hinweis |
---|---|---|---|
CSS-Box-Modell | |||
width |
✅ Ja | ✅ Ja | |
height |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
border |
❌ Nein | ✅ Ja | |
margin |
✅ Ja | ✅ Ja | |
padding |
⚠️ Teilweise[1] | ✅ Ja |
|
Text und Schriftart | |||
color |
N.A. | N.A. | |
font |
N.A. | N.A. | |
letter-spacing |
N.A. | N.A. | |
text-align |
N.A. | N.A. | |
text-decoration |
N.A. | N.A. | |
text-indent |
N.A. | N.A. | |
text-overflow |
N.A. | N.A. | |
text-shadow |
N.A. | N.A. | |
text-transform |
N.A. | N.A. | |
Rahmen und Hintergrund | |||
background |
❌ Nein[1] | ❌ Nein[1] |
|
border-radius |
❌ Nein[1] | ❌ Nein[1] | |
box-shadow |
❌ Nein[1] | ❌ Nein[1] |
Bildschaltflächen
Siehe den image
Eingabetyp:
Eigenschaft | N | T | Hinweis |
---|---|---|---|
CSS-Box-Modell | |||
width |
✅ Ja | ✅ Ja | |
height |
✅ Ja | ✅ Ja | |
border |
✅ Ja | ✅ Ja | |
margin |
✅ Ja | ✅ Ja | |
padding |
✅ Ja | ✅ Ja | |
Text und Schriftart | |||
color |
N.A. | N.A. | |
font |
N.A. | N.A. | |
letter-spacing |
N.A. | N.A. | |
text-align |
N.A. | N.A. | |
text-decoration |
N.A. | N.A. | |
text-indent |
N.A. | N.A. | |
text-overflow |
N.A. | N.A. | |
text-shadow |
N.A. | N.A. | |
text-transform |
N.A. | N.A. | |
Rahmen und Hintergrund | |||
background |
✅ Ja | ✅ Ja | |
border-radius |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
box-shadow |
⚠️ Teilweise[1] | ⚠️ Teilweise[1] |
|
Siehe auch
Lernpfad
Erweitere Themen
- Formulare über JavaScript senden
- Anleitung zum Erstellen benutzerdefinierter Formular-Widgets
- HTML-Formulare in älteren Browsern
- Erweiterte Stile für HTML-Formulare
- Eigenschaftskompatibilitätstabelle für Formular-Widgets