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
  1. 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
  1. 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
  1. 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
  1. 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]
  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
  1. 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
  1. 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]
  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
  1. Diese Eigenschaft wird auf WebKit-basierten Browsern auf Mac OSX oder iOS nicht angewendet.
border ⚠️ Teilweise ✅ Ja
margin ✅ Ja ✅ Ja
padding ⚠️ Teilweise[1] ✅ Ja
  1. 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]
  1. In Opera wird die border-radius-Eigenschaft nur angewendet, wenn ein expliziter Rand gesetzt ist.
box-shadow ❌ Nein ⚠️ Teilweise[1]
  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]
  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]
  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]
  1. Einige Browser fügen zusätzliche Ränder hinzu und andere dehnen das Widget.
height ❌ Nein[1] ❌ Nein[1]
  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]
  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]
  1. Die Eigenschaft wird angewendet, jedoch auf inkonsistente Weise zwischen Browsern auf Mac OSX.
  2. 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]
  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]
  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]
  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]
  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]
  1. Die meisten Browser unterstützen diese Eigenschaft nur auf dem <select> Element.
text-overflow ❌ Nein ❌ Nein
text-shadow ⚠️ Teilweise[1] ⚠️ Teilweise[1]
  1. Die meisten Browser unterstützen diese Eigenschaft nur auf dem <select> Element.
text-transform ⚠️ Teilweise[1] ⚠️ Teilweise[1]
  1. Die meisten Browser unterstützen diese Eigenschaft nur auf dem <select> Element.
Rand und Hintergrund
background ⚠️ Teilweise[1] ⚠️ Teilweise[1]
  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]
  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]
  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]
  1. WebKit-basierte Browser auf Mac OSX unterstützen diese Eigenschaft nicht auf diesem Widget.
text-decoration ❌ Nein[1] ❌ Nein[1]
  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]
  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]
  1. In Opera wird die border-radius Eigenschaft nur angewendet, wenn ein expliziter Rand gesetzt ist.
box-shadow ❌ Nein ⚠️ Teilweise[1]
  1. IE9 unterstützt diese Eigenschaft nicht.

Datenliste

Sehen Sie sich die <datalist>- und <input>-Elemente und das 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]
  1. Unterstützt, aber es gibt zu viele Inkonsistenzen zwischen den Browsern, um zuverlässig zu sein.
letter-spacing ⚠️ Teilweise[1] ⚠️ Teilweise[1]
  1. Viele Browser wenden diese Eigenschaft auf die Auswahltaste an.
text-align ❌ Nein ❌ Nein
text-decoration ❌ Nein ❌ Nein
text-indent ⚠️ Teilweise[1] ⚠️ Teilweise[1]
  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]
  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]
  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 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
  1. Opera behandelt dies wie ein Auswahl-Widget mit der gleichen Einschränkung.
border ✅ Ja ✅ Ja
margin ✅ Ja ✅ Ja
padding ❌ Nein[1] ✅ Ja
  1. 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]
  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]
  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]
  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]
  1. Chrome und Opera fügen dem Widget zusätzlichen Platz hinzu.
border ❌ Nein ✅ Ja
margin ✅ Ja ✅ Ja
padding ⚠️ Teilweise[1] ✅ Ja
  1. 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]
  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]
  1. IE9 unterstützt diese Eigenschaft nicht.
box-shadow ⚠️ Teilweise[1] ⚠️ Teilweise[1]
  1. IE9 unterstützt diese Eigenschaft nicht.

Siehe auch

Lernpfad

Erweitere Themen