Compatibiliteitstabel voor formulierelementen

De volgende compatibiliteitstabellen trachten een samenvatting te geven van CSS-ondersteuning voor HTML-formulieren. Door de complexiteit van CSS en HTML kunnen deze tabellen niet als volledig beschouwd worden. Zij geven echter een goed inzicht in wat wel en wat niet mogelijk is.

Hoe de tabellen lezen

Waarden

Voor elke eigenschap zijn er vier mogelijke waarden:

JA
De eigenschap gedraagt zich consistent over browsers. Neveneffecten zijn in bepaalde gevallen echter niet uitgesloten.
GEDEELTELIJK
Alhoewel de eigenschap werkt, zijn er toch soms neveneffecten of inconsistenties. Men gebruikt deze eigenschappen best niet tenzij de neveneffecten op voorhand aangepakt worden.
NEEN
De eigenschap werkt niet of is zo inconsistent dat zij niet betrouwbaar werkt.
N.V.T.
De eigenschap heeft geen enkele betekenis voor dit type of element.

Weergave

Elke eigenschap wordt op twee manieren weergegeven:

N (Normaal)
Betekent dat de eigenschap gewoon toegepast kan worden.
A (Aangepast)
Geeft aan dat de eigenschap toegepast wordt met onderstaande regels:
* {
/* Schakelt het klassieke uiterlijk en aanvoelen uit bij WebKit gebaseerde browsers */
  -webkit-appearance: none;

/* Schakelt het klassieke uiterlijk en aanvoelen uit bij Gecko gebaseerde browsers */
  -moz-appearance: none;

/* Schakelt het klassieke uiterlijk en aanvoelen uit bij diverse browsers met inbegrip
  van Opera, Internet Explorer en Firefox */
  background: none;
}

Compatibiliteitstabellen

Globaal gedrag

Sommige eigenschappen gedragen zich in het algemeen hetzelfde over de diverse browsers:

border, background, border-radius, height
Deze eigenschappen kunnen bij bepaalde browsers geheel of gedeeltelijk het klassieke uiterlijk en aanvoelen uitschakelen. Deze eigenschappen moeten met voorzichtigheid gebruikt worden.
line-height
Deze eigenschap is inconsistent over de verschillende browsers. Zij kan beter vermeden worden.
text-decoration
Deze eigenschap wordt niet ondersteund door Opera voor formulierelementen.
text-overflow
Opera, Safari en IE9 ondersteunen deze eigenschap niet voor formulierelementen.
text-shadow
Opera ondersteunt text-shadow  niet voor formulierelementen en IE9 ondersteunt het helemaal niet.

Tekstvelden

Eigenschap N A Nota
CSS box model
width Ja Ja  
height Gedeeltelijk[1][2] Ja
  1. WebKit browsers (meestal op  Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om  -webkit-appearance:none te gebruiken om deze eigenschap te gebruiken bij zoekvelden.
  2.  Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij background:none wordt gebruikt.
border Gedeeltelijk[1][2] Ja
  1. WebKit browsers (meestal op  Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om  -webkit-appearance:none te gebruiken om deze eigenschap te gebruiken bij zoekvelden.
  2. Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij background:none wordt gebruikt.
margin Ja Ja  
padding Gedeeltelijk[1][2] Ja
  1. WebKit browsers (meestal op  Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om  -webkit-appearance:none te gebruiken om deze eigenschap te gebruiken bij zoekvelden.
  2. Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij background:none wordt gebruikt.
Tekst en font
color[1] Ja Ja
  1. Als de border-color eigenschap niet ingesteld is zullen browsers die op WebKit gebaseerd zijn de color eigenschap toepassen op de rand en font voor <textarea>.
font Ja Ja Zie de nota over line-height
letter-spacing Ja Ja  
text-align Ja Ja  
text-decoration Gedeeltelijk Gedeeltelijk Zie nota betreffende Opera
text-indent Gedeeltelijk[1] Gedeeltelijk[1]
  1. IE9 ondersteunt deze eigenschap alleen voor <textarea>, terwijl Opera het alleen ondersteunt in éénregelige tekstvelden.
text-overflow Gedeeltelijk Gedeeltelijk  
text-shadow Gedeeltelijk Gedeeltelijk  
text-transform Ja Ja  
Rand en achtergrond
background Gedeeltelijk[1] Ja
  1. WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden.  Hiertoe moet -webkit-appearance:none   aangewend worden.  Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij background:none gebruikt wordt.
border-radius Gedeeltelijk[1][2] Ja
  1. WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Hiertoe moet -webkit-appearance:none aangewend worden .  Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij background:none gebruikt wordt.
  2. Bij Opera wordt de border-radius eigenschap alleen gebruikt als er expliciet een rand ingesteld is.
box-shadow Neen Gedeeltelijk[1]
  1. IE9 ondersteunt deze eigenschap niet.

Knoppen

Eigenschap N A Nota
CSS box model
width Ja Ja  
height Gedeeltelijk[1] Ja
  1. Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.
border Gedeeltelijk Ja  
margin Ja Ja  
padding Gedeeltelijk[1] Ja
  1. Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.
Tekst en font
color Ja Ja  
font Ja Ja Zie nota over  line-height.
letter-spacing Ja Ja  
text-align Neen Neen  
text-decoration Gedeeltelijk Ja  
text-indent Ja Ja  
text-overflow Neen Neen  
text-shadow Gedeeltelijk Gedeeltelijk  
text-transform Ja Ja  
Rand en achtergrond
background Ja Ja  
border-radius Ja[1] Ja[1]
  1. Bij Opera wordt de border-radius eigenschap alleen gebruikt als er expliciet een rand ingesteld is.
box-shadow Neen Partial[1]
  1. IE9 ondersteunt deze eigenschap niet.

Number

Bij browsers die het  number  element gebruiken is er geen standaard manier om de stijl van de spinner, die de waarde van het  veld aanpast, te  wijzigen. Noteer dat bij Safari de spinner buiten het veld staat.

Eigenschap N A Nota
CSS box model
width Ja Ja  
height Gedeeltelijk[1] Gedeeltelijk[1]
  1. Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.
border Ja Ja  
margin Ja Ja  
padding Gedeeltelijk[1] Gedeeltelijk[1]
  1. Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.
Tekst en font
color Ja Ja  
font Ja Ja Zie nota over line-height.
letter-spacing Ja Ja  
text-align Ja Ja  
text-decoration Gedeeltelijk Gedeeltelijk  
text-indent Ja Ja  
text-overflow Neen Neen  
text-shadow Gedeeltelijk Gedeeltelijk  
text-transform N.V.T. N.V.T.  
Rand en achtergrond
background Neen Neen

Wordt ondersteund maar er is te weinig consistentie tussen browsers om betrouwbaar te zijn.
border-radius Neen Neen
box-shadow Neen Neen

Keuzevakjes en keuzerondjes

Eigenschap N A Nota
CSS box model
width Neen[1] Neen[1]
  1. Sommige browsers voegen extra marges toe, andere vergroten het element.
height Neen[1] Neen[1]
  1. Sommige browsers voegen extra marges toe, andere vergroten het element.
border Neen Neen  
margin Ja Ja  
padding Neen Neen  
Text and font
color N.V.T. N.V.T.  
font N.V.T. N.V.T.  
letter-spacing N.V.T. N.V.T.  
text-align N.V.T. N.V.T.  
text-decoration N.V.T. N.V.T.  
text-indent N.V.T. N.V.T.  
text-overflow N.V.T. N.V.T.  
text-shadow N.V.T. N.V.T.  
text-transform N.V.T. N.V.T.  
Rand en achtergrond
background Neen Neen  
border-radius Neen Neen  
box-shadow Neen Neen  

Keuzevakken (éénregelig)

Firefox voorziet geen mogelijkheid om het selectiepijltje van het <select> element te wijzigen.

Eigenschap N A Nota
CSS box model
width Gedeeltelijk[1] Gedeeltelijk[1]
  1. Deze eigenschap werkt voor het <select> element maar niet voor de <option> of <optgroup> elementen.
height Neen Ja  
border Gedeeltelijk Ja  
margin Ja Ja  
padding Neen[1] Gedeeltelijk[2]
  1. De eigenschap werkt maar maar niet consistent over browsers op Mac OSX.
  2. Deze eigenschap werkt voor het <select> element maar niet voor de <option> of <optgroup> elementen.
Tekst en font
color Gedeeltelijk[1] Gedeeltelijk[1]
  1. Mac OSX ondersteunt niet de WebKit gebaseerde browsers. Evenmin ondersteunt MAC OSX samen met Opera het   <option> en het <optgroup> element.
font Gedeeltelijk[1] Gedeeltelijk[1]
  1. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de oorspronkelijke elementen. Evenmin ondersteunt MAC OSX samen met Opera het   <option> en het <optgroup> element.
letter-spacing Gedeeltelijk[1] Gedeeltelijk[1]
  1. IE9 ondersteunt deze eiegenschap niet voor de <select>, <option> en <optgroup> elementen.  WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de <option> en <optgroup> elementen.
text-align Neen[1] Neen[1]
  1. IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor dit element.
text-decoration Gedeeltelijk[1] Gedeeltelijk[1]
  1. Alleen Firefox ondersteunt deze eigenschap volledig. Opera ondersteunt deze eigenschap helemaal niet en andere browsers ondersteunen alleen het <select> element.
text-indent Gedeeltelijk[1][2] Gedeeltelijk[1][2]
  1. De meeste browsers ondersteunen alleen het <select> element.
  2. IE9 ondersteunt deze eigenschap niet.
text-overflow Neen Neen  
text-shadow Gedeeltelijk[1][2] Gedeeltelijk[1][2]
  1. De meeste browsers ondersteunen alleen het <select> element.
  2. IE9 ondersteunt deze eigenschap niet.
text-transform Gedeeltelijk[1] Gedeeltelijk[1]
  1. De meeste browsers ondersteunen alleen het <select> element.
Rand en achtergrond
background Gedeeltelijk[1] Gedeeltelijk[1]
  1. De meeste browsers ondersteunen alleen het <select> element.
border-radius Gedeeltelijk[1] Gedeeltelijk[1]
box-shadow Neen Gedeeltelijk[1]

Keuzevakken (meerregelig)

Eigenschap N A Nota
CSS box model
width Ja Ja  
height Ja Ja  
border Ja Ja  
margin Ja Ja  
padding Gedeeltelijk[1] Gedeeltelijk[1]
  1. Opera ondersteunt niet padding-top en padding-bottom van het <select> element.
Tekst en font
color Ja Ja  
font Ja Ja Zie de nota betreffende line-height.
letter-spacing Gedeeltelijk[1] Gedeeltelijk[1]
  1. IE9 ondersteunt deze eigenschap niet voor de <select>, <option> en <optgroup> elementen. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de <option> en <optgroup> elementen.
text-align Neen[1] Neen[1]
  1. IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet.
text-decoration Neen[1] Neen[1]
  1. Alleen ondersteund door Firefox en IE9+.
text-indent Neen Neen  
text-overflow Neen Neen  
text-shadow Neen Neen  
text-transform Gedeeltelijk[1] Gedeeltelijk[1]
  1. De meeste browsers ondersteunen deze eigenschap slechts voor het <select> element.
Rand en achtergrond
background Ja Ja  
border-radius Ja[1] Ja[1]
  1. Bij Opera wordt de border-radius eigenschap alleen ondersteund als expliciet een rand ingesteld is.
box-shadow Neen Gedeeltelijk[1]
  1. IE9 ondersteunt deze eigenschap niet.

Datalist

Eigenschap N A Nota
CSS box model
width Neen Neen  
height Neen Neen  
border Neen Neen  
margin Neen Neen  
padding Neen Neen  
Tekst en font
color Neen Neen  
font Neen Neen  
letter-spacing Neen Neen  
text-align Neen Neen  
text-decoration Neen Neen  
text-indent Neen Neen  
text-overflow Neen

Neen

  
text-shadow Neen Neen  
text-transform Neen Neen  
Rand en achtergrond
background Neen Neen  
border-radius Neen Neen  
box-shadow Neen Neen  

Bestandslijst

Eigenschap N A Nota
CSS box model
width Neen Neen  
height Neen Neen  
border Neen Neen  
margin Ja Ja  
padding Neen Neen  
Tekst en font
color Ja Ja  
font Neen[1] Neen[1]
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
letter-spacing Gedeeltelijk[1] Gedeeltelijk[1]
  1. Veel browsers passen deze eigenschap toe op de selectieknop.
text-align Neen Neen  
text-decoration Neen Neen  
text-indent Gedeeltelijk[1] Gedeeltelijk[1]
  1. Reageert min of meer als een extra linker marge buiten het element.
text-overflow Neen Neen  
text-shadow Neen Neen  
text-transform Neen Neen  
Border and background
background Neen[1] Neen[1]
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
border-radius Neen Neen  
box-shadow Neen Gedeeltelijk[1]
  1. IE9 ondersteunt deze eigenschap niet.

Datumselectie

Vele eigenschappen worden ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
 

Eigenschap N A Nota
CSS box model
width Neen Neen  
height Neen Neen  
border Neen Neen  
margin Ja Ja  
padding Neen Neen  
Tekst en font
color Neen Neen  
font Neen Neen  
letter-spacing Neen Neen  
text-align Neen Neen  
text-decoration Neen Neen  
text-indent Neen Neen  
text-overflow Neen Neen  
text-shadow Neen Neen  
text-transform Neen Neen  
Rand en achtergrond
background Neen Neen  
border-radius Neen Neen  
box-shadow Neen Neen  

Kleurenselectie

Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.

Eigenschap N A Nota
CSS box model
width Ja Ja  
height Neen[1] Ja
  1. Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.
border Ja Ja  
margin Ja Ja  
padding Neen[1] Ja
  1. Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.
Tekst en font
color N.V.T. N.V.T.  
font N.V.T. N.V.T.  
letter-spacing N.V.T. N.V.T.  
text-align N.V.T. N.V.T.  
text-decoration N.V.T. N.V.T.  
text-indent N.V.T. N.V.T.  
text-overflow N.V.T. N.V.T.  
text-shadow N.V.T. N.V.T.  
text-transform N.V.T. N.V.T.  
Rand en achtergrond
background Neen[1] Neen[1]
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
border-radius Neen[1] Neen[1]
box-shadow Neen[1] Neen[1]

Meters en voortgangsbalken

Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.

Eigenschap N A Nota
CSS box model
width Ja Ja  
height Ja Ja  
border Gedeeltelijk Ja  
margin Ja Ja  
padding Ja Gedeeltelijk[1]
  1. Chrome verbergt de <progress> en  <meter> elementen wanneer de padding eigenschap is toegepast op een element.
Tekst en font
color N.V.T. N.V.T.  
font N.V.T. N.V.T.  
letter-spacing N.V.T. N.V.T.  
text-align N.V.T. N.V.T.  
text-decoration N.V.T. N.V.T.  
text-indent N.V.T. N.V.T.  
text-overflow N.V.T. N.V.T.  
text-shadow N.V.T. N.V.T.  
text-transform N.V.T. N.V.T.  
Rand en achtergrond
background Neen[1] Neen[1]
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
border-radius Neen[1] Neen[1]
box-shadow Neen[1] Neen[1]

Bereik

Er is geen standaard manier om de stijl van het handvat van het bereik te veranderen en Opera laat helemaal geen wijziging toe van de standaard stijl.

Eigenschap N A Nota
CSS box model
width Ja Ja  
height Gedeeltelijk[1] Gedeeltelijk[1]
  1. Chrome en Opera voegen wat extra ruimte toe rond het element terwijl Opera op Windows 7 de greep vergroot.
border Neen Ja  
margin Ja Ja  
padding Gedeeltelijk[1] Ja
  1. padding wordt gebruikt maar heeft geen visueel effect.
Tekst en font
color N.V.T. N.V.T.  
font N.V.T. N.V.T.  
letter-spacing N.V.T. N.V.T.  
text-align N.V.T. N.V.T.  
text-decoration N.V.T. N.V.T.  
text-indent N.V.T. N.V.T.  
text-overflow N.V.T. N.V.T.  
text-shadow N.V.T. N.V.T.  
text-transform N.V.T. N.V.T.  
Border and background
background Neen[1] Neen[1]
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
border-radius Neen[1] Neen[1]
box-shadow Neen[1] Neen[1]

Afbeeldingsknoppen

Eigenschap N A Nota
CSS box model
width Ja Ja  
height Ja Ja  
border Ja Ja  
margin Ja Ja  
padding Ja Ja  
Tekst en font
color N.V.T. N.V.T.  
font N.V.T. N.V.T.  
letter-spacing N.V.T. N.V.T.  
text-align N.V.T. N.V.T.  
text-decoration N.V.T. N.V.T.  
text-indent N.V.T. N.V.T.  
text-overflow N.V.T. N.V.T.  
text-shadow N.V.T. N.V.T.  
text-transform N.V.T. N.V.T.  
Rand en achtergrond
background Ja Ja  
border-radius Gedeeltelijk[1] Gedeeltelijk[1]
  1. IE9 ondersteunt deze eigenschap niet.
box-shadow Gedeeltelijk[1] Gedeeltelijk[1]
  1. IE9 ondersteunt deze eigenschap niet.