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:

css

* {
  /* 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	WebKit-Browser (hauptsächlich auf Mac OSX und iOS) verwenden das native Aussehen & Gefühl für die Suchfelder. Daher ist es erforderlich, `appearance:none` zu verwenden, um diese Eigenschaft auf Suchfelder anwenden zu können.
`border`	⚠️ Teilweise^[1]	✅ Ja	WebKit-Browser (hauptsächlich auf Mac OSX und iOS) verwenden das native Aussehen & Gefühl für die Suchfelder. Daher ist es erforderlich, `appearance:none` zu verwenden, um diese Eigenschaft auf Suchfelder anwenden zu können.
`margin`	✅ Ja	✅ Ja
`padding`	⚠️ Teilweise^[1]	✅ Ja	WebKit-Browser (hauptsächlich auf Mac OSX und iOS) verwenden das native Aussehen & Gefühl für die Suchfelder. Daher ist es erforderlich, `appearance:none` zu verwenden, um diese Eigenschaft auf Suchfelder anwenden zu können.
Text und Schrift
`color`^[1]	✅ Ja	✅ Ja	Wenn die `border-color`-Eigenschaft nicht gesetzt ist, werden einige WebKit-basierte Browser die `color`-Eigenschaft sowohl auf den Rahmen als auch auf die Schrift auf `<textarea>`s anwenden.
`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]	IE9 unterstützt diese Eigenschaft nur auf `<textarea>`s, während Opera sie nur auf einzeilige Textfelder unterstützt.
`text-overflow`	⚠️ Teilweise	⚠️ Teilweise
`text-shadow`	⚠️ Teilweise	⚠️ Teilweise
`text-transform`	✅ Ja	✅ Ja
Rand und Hintergrund
`background`	⚠️ Teilweise^[1]	✅ Ja	WebKit-Browser (hauptsächlich auf Mac OSX und iOS) verwenden das native Aussehen & Gefühl für die Suchfelder. Daher ist es erforderlich, `-webkit-appearance:none` zu verwenden, um diese Eigenschaft auf Suchfelder anwenden zu können.
`border-radius`	⚠️ Teilweise^[1]	✅ Ja	WebKit-Browser (hauptsächlich auf Mac OSX und iOS) verwenden das native Aussehen & Gefühl für die Suchfelder. Daher ist es erforderlich, `-webkit-appearance:none` zu verwenden, um diese Eigenschaft auf Suchfelder anwenden zu können.
`box-shadow`	❌ Nein	⚠️ Teilweise^[1]	IE9 unterstützt diese Eigenschaft nicht.

Schaltflächen

Siehe die button, submit, und reset Eingabetypen und das <button> Element.

Eigenschaft	N	T	Hinweis
CSS-Boxmodell
`width`	✅ Ja	✅ Ja
`height`	⚠️ Teilweise^[1]	✅ Ja	Diese Eigenschaft wird auf WebKit-basierten Browsern auf Mac OSX oder iOS nicht angewendet.
`border`	⚠️ Teilweise	✅ Ja
`margin`	✅ Ja	✅ Ja
`padding`	⚠️ Teilweise^[1]	✅ Ja	Diese Eigenschaft wird auf WebKit-basierten Browsern auf Mac OSX oder iOS nicht angewendet.
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]	In Opera wird die `border-radius`-Eigenschaft nur angewendet, wenn ein expliziter Rand gesetzt ist.
`box-shadow`	❌ Nein	⚠️ Teilweise^[1]	IE9 unterstützt diese Eigenschaft nicht.

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]	In Opera sind die Spinner herangezoomt, was den Inhalt des Feldes verbergen kann.
`border`	✅ Ja	✅ Ja
`margin`	✅ Ja	✅ Ja
`padding`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	In Opera sind die Spinner herangezoomt, was den Inhalt des Feldes verbergen kann.
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]	Einige Browser fügen zusätzliche Ränder hinzu und andere dehnen das Widget.
`height`	❌ Nein^[1]	❌ Nein^[1]	Einige Browser fügen zusätzliche Ränder hinzu und andere dehnen das Widget.
`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>, <optgroup> und <option> Elemente.

Eigenschaft	N	T	Hinweis
CSS-Boxmodell
`width`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	Diese Eigenschaft funktioniert einwandfrei auf dem `<select>` Element, kann jedoch nicht auf das `<option>` oder `<optgroup>` Element angewendet werden.
`height`	❌ Nein	✅ Ja
`border`	⚠️ Teilweise	✅ Ja
`margin`	✅ Ja	✅ Ja
`padding`	❌ Nein^[1]	⚠️ Teilweise^[2]	Die Eigenschaft wird angewendet, jedoch auf inkonsistente Weise zwischen Browsern auf Mac OSX. Die Eigenschaft wird korrekt auf dem `<select>` Element angewendet, wird jedoch auf `<option>` und `<optgroup>` Elementen inkonsistent gehandhabt.
Text und Schrift
`color`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	Auf Mac OSX unterstützen WebKit-basierte Browser diese Eigenschaft nicht bei nativen Widgets, und sie, zusammen mit Opera, unterstützen sie überhaupt nicht bei `<option>` und `<optgroup>` Elementen.
`font`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	Auf Mac OSX unterstützen WebKit-basierte Browser diese Eigenschaft nicht bei nativen Widgets, und sie, zusammen mit Opera, unterstützen sie überhaupt nicht bei `<option>` und `<optgroup>`-Elementen.
`letter-spacing`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	IE9 unterstützt diese Eigenschaft nicht auf `<select>`, `<option>` und `<optgroup>` Elementen; WebKit basierte Browser auf Mac OSX unterstützen diese Eigenschaft nicht auf `<option>` und `<optgroup>` Elementen.
`text-decoration`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	Nur Firefox bietet volle Unterstützung für diese Eigenschaft. Andere Browser unterstützen sie nur auf dem `<select>` Element.
`text-indent`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	Die meisten Browser unterstützen diese Eigenschaft nur auf dem `<select>` Element.
`text-overflow`	❌ Nein	❌ Nein
`text-shadow`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	Die meisten Browser unterstützen diese Eigenschaft nur auf dem `<select>` Element.
`text-transform`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	Die meisten Browser unterstützen diese Eigenschaft nur auf dem `<select>` Element.
Rand und Hintergrund
`background`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	Die meisten Browser unterstützen diese Eigenschaft nur auf dem `<select>` Element.
`border-radius`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]
`box-shadow`	❌ Nein	⚠️ Teilweise^[1]

Beachten Sie, dass Firefox keine Möglichkeit bietet, den Abwärtspfeil auf dem <select> Element zu ändern.

Sehen Sie sich die <select>, <optgroup> und <option> Elemente und das 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]	Opera unterstützt `padding-top` und `padding-bottom` nicht auf dem `<select>` Element.
Text und Schriftart
`color`	✅ Ja	✅ Ja
`font`	✅ Ja	✅ Ja	Siehe den Hinweis zur `line-height`.
`letter-spacing`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	IE9 unterstützt diese Eigenschaft nicht auf `<select>`, `<option>` und `<optgroup>` Elementen; WebKit basierte Browser auf Mac OSX unterstützen diese Eigenschaft nicht auf `<option>` und `<optgroup>` Elementen.
`text-align`	❌ Nein^[1]	❌ Nein^[1]	WebKit-basierte Browser auf Mac OSX unterstützen diese Eigenschaft nicht auf diesem Widget.
`text-decoration`	❌ Nein^[1]	❌ Nein^[1]	Nur unterstützt von Firefox und IE9+.
`text-indent`	❌ Nein	❌ Nein
`text-overflow`	❌ Nein	❌ Nein
`text-shadow`	❌ Nein	❌ Nein
`text-transform`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	Die meisten Browser unterstützen diese Eigenschaft nur auf dem `<select>` Element.
Rand und Hintergrund
`background`	✅ Ja	✅ Ja
`border-radius`	✅ Ja^[1]	✅ Ja^[1]	In Opera wird die `border-radius` Eigenschaft nur angewendet, wenn ein expliziter Rand gesetzt ist.
`box-shadow`	❌ Nein	⚠️ Teilweise^[1]	IE9 unterstützt diese Eigenschaft nicht.

Datenliste

Sehen Sie sich die <datalist>- und <input>-Elemente und das list Attribut an.

Eigenschaft	N	T
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]	Unterstützt, aber es gibt zu viele Inkonsistenzen zwischen den Browsern, um zuverlässig zu sein.
`letter-spacing`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	Viele Browser wenden diese Eigenschaft auf die Auswahltaste an.
`text-align`	❌ Nein	❌ Nein
`text-decoration`	❌ Nein	❌ Nein
`text-indent`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	Es wirkt mehr oder weniger wie ein zusätzlicher linker Rand außerhalb des Widgets.
`text-overflow`	❌ Nein	❌ Nein
`text-shadow`	❌ Nein	❌ Nein
`text-transform`	❌ Nein	❌ Nein
Rand und Hintergrund
`background`	❌ Nein^[1]	❌ Nein^[1]	Unterstützt, aber es gibt zu viele Inkonsistenzen zwischen den Browsern, um zuverlässig zu sein.
`border-radius`	❌ Nein	❌ Nein
`box-shadow`	❌ Nein	⚠️ Teilweise^[1]	IE9 unterstützt diese Eigenschaft nicht.

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
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	Opera behandelt dies wie ein Auswahl-Widget mit der gleichen Einschränkung.
`border`	✅ Ja	✅ Ja
`margin`	✅ Ja	✅ Ja
`padding`	❌ Nein^[1]	✅ Ja	Opera behandelt dies wie ein Auswahl-Widget mit der gleichen Einschränkung.
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]	Unterstützt, aber es gibt zu viele Inkonsistenzen zwischen den Browsern, um zuverlässig zu sein.
`border-radius`	❌ Nein^[1]	❌ Nein^[1]
`box-shadow`	❌ Nein^[1]	❌ Nein^[1]

Messgeräte und Fortschrittsbalken

Sehen Sie sich die <meter> und <progress> Elemente an:

Eigenschaft	N	T	Hinweis
CSS-Box-Modell
`width`	✅ Ja	✅ Ja
`height`	✅ Ja	✅ Ja
`border`	⚠️ Teilweise	✅ Ja
`margin`	✅ Ja	✅ Ja
`padding`	✅ Ja	⚠️ Teilweise^[1]	Chrome verbirgt das `<progress>` und `<meter>` Element, wenn die `padding` Eigenschaft auf einem veränderten Element angewendet wird.
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]	Unterstützt, aber es gibt zu viele Inkonsistenzen zwischen den Browsern, um zuverlässig zu sein.
`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]	Chrome und Opera fügen dem Widget zusätzlichen Platz hinzu.
`border`	❌ Nein	✅ Ja
`margin`	✅ Ja	✅ Ja
`padding`	⚠️ Teilweise^[1]	✅ Ja	Das `padding` wird angewendet, hat jedoch keine visuelle Wirkung.
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]	Unterstützt, aber es gibt zu viele Inkonsistenzen zwischen Browsern, um zuverlässig zu sein.
`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]	IE9 unterstützt diese Eigenschaft nicht.
`box-shadow`	⚠️ Teilweise^[1]	⚠️ Teilweise^[1]	IE9 unterstützt diese Eigenschaft nicht.

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