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

Tekstvelden

Eigenschap N A Nota
CSS box model
width (en-US) Ja Ja  
height (en-US) 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 (en-US) 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 (en-US) Ja Ja  
padding (en-US) 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 (en-US)[1] Ja Ja
  1. Als de border-color (en-US) eigenschap niet ingesteld is zullen browsers die op WebKit gebaseerd zijn de color (en-US) eigenschap toepassen op de rand en font voor <textarea> (en-US).
font (en-US) Ja Ja Zie de nota over line-height (en-US)
letter-spacing (en-US) Ja Ja  
text-align (en-US) Ja Ja  
text-decoration (en-US) Gedeeltelijk Gedeeltelijk Zie nota betreffende Opera
text-indent (en-US) Gedeeltelijk[1] Gedeeltelijk[1]
  1. IE9 ondersteunt deze eigenschap alleen voor <textarea> (en-US), terwijl Opera het alleen ondersteunt in éénregelige tekstvelden.
text-overflow (en-US) Gedeeltelijk Gedeeltelijk  
text-shadow (en-US) Gedeeltelijk Gedeeltelijk  
text-transform (en-US) Ja Ja  
Rand en achtergrond
background (en-US) 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 (en-US) 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 (en-US) eigenschap alleen gebruikt als er expliciet een rand ingesteld is.
box-shadow (en-US) Neen Gedeeltelijk[1]
  1. IE9 ondersteunt deze eigenschap niet.

Knoppen

Eigenschap N A Nota
CSS box model
width (en-US) Ja Ja  
height (en-US) Gedeeltelijk[1] Ja
  1. Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.
border (en-US) Gedeeltelijk Ja  
margin (en-US) Ja Ja  
padding (en-US) 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 (en-US) Ja Ja  
font (en-US) Ja Ja Zie nota over  line-height (en-US).
letter-spacing (en-US) Ja Ja  
text-align (en-US) Neen Neen  
text-decoration (en-US) Gedeeltelijk Ja  
text-indent (en-US) Ja Ja  
text-overflow (en-US) Neen Neen  
text-shadow (en-US) Gedeeltelijk Gedeeltelijk  
text-transform (en-US) Ja Ja  
Rand en achtergrond
background (en-US) Ja Ja  
border-radius (en-US) Ja[1] Ja[1]
  1. Bij Opera wordt de border-radius (en-US) eigenschap alleen gebruikt als er expliciet een rand ingesteld is.
box-shadow (en-US) 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 (en-US) Ja Ja  
height (en-US) Gedeeltelijk[1] Gedeeltelijk[1]
  1. Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.
border (en-US) Ja Ja  
margin (en-US) Ja Ja  
padding (en-US) Gedeeltelijk[1] Gedeeltelijk[1]
  1. Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.
Tekst en font
color (en-US) Ja Ja  
font (en-US) Ja Ja Zie nota over line-height (en-US).
letter-spacing (en-US) Ja Ja  
text-align (en-US) Ja Ja  
text-decoration (en-US) Gedeeltelijk Gedeeltelijk  
text-indent (en-US) Ja Ja  
text-overflow (en-US) Neen Neen  
text-shadow (en-US) Gedeeltelijk Gedeeltelijk  
text-transform (en-US) N.V.T. N.V.T.  
Rand en achtergrond
background (en-US) Neen Neen

Wordt ondersteund maar er is te weinig consistentie tussen browsers om betrouwbaar te zijn.

border-radius (en-US) Neen Neen
box-shadow (en-US) Neen Neen

Keuzevakjes en keuzerondjes

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

Keuzevakken (éénregelig)

Firefox voorziet geen mogelijkheid om het selectiepijltje van het <select> (en-US) element te wijzigen.

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

Keuzevakken (meerregelig)

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

Datalist

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

Neen

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

Bestandslijst

Eigenschap N A Nota
CSS box model
width (en-US) Neen Neen  
height (en-US) Neen Neen  
border (en-US) Neen Neen  
margin (en-US) Ja Ja  
padding (en-US) Neen Neen  
Tekst en font
color (en-US) Ja Ja  
font (en-US) Neen[1] Neen[1]
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
letter-spacing (en-US) Gedeeltelijk[1] Gedeeltelijk[1]
  1. Veel browsers passen deze eigenschap toe op de selectieknop.
text-align (en-US) Neen Neen  
text-decoration (en-US) Neen Neen  
text-indent (en-US) Gedeeltelijk[1] Gedeeltelijk[1]
  1. Reageert min of meer als een extra linker marge buiten het element.
text-overflow (en-US) Neen Neen  
text-shadow (en-US) Neen Neen  
text-transform (en-US) Neen Neen  
Border and background
background (en-US) Neen[1] Neen[1]
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
border-radius (en-US) Neen Neen  
box-shadow (en-US) 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 (en-US) Neen Neen  
height (en-US) Neen Neen  
border (en-US) Neen Neen  
margin (en-US) Ja Ja  
padding (en-US) Neen Neen  
Tekst en font
color (en-US) Neen Neen  
font (en-US) Neen Neen  
letter-spacing (en-US) Neen Neen  
text-align (en-US) Neen Neen  
text-decoration (en-US) Neen Neen  
text-indent (en-US) Neen Neen  
text-overflow (en-US) Neen Neen  
text-shadow (en-US) Neen Neen  
text-transform (en-US) Neen Neen  
Rand en achtergrond
background (en-US) Neen Neen  
border-radius (en-US) Neen Neen  
box-shadow (en-US) 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 (en-US) Ja Ja  
height (en-US) Neen[1] Ja
  1. Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.
border (en-US) Ja Ja  
margin (en-US) Ja Ja  
padding (en-US) Neen[1] Ja
  1. Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.
Tekst en font
color (en-US) N.V.T. N.V.T.  
font (en-US) N.V.T. N.V.T.  
letter-spacing (en-US) N.V.T. N.V.T.  
text-align (en-US) N.V.T. N.V.T.  
text-decoration (en-US) N.V.T. N.V.T.  
text-indent (en-US) N.V.T. N.V.T.  
text-overflow (en-US) N.V.T. N.V.T.  
text-shadow (en-US) N.V.T. N.V.T.  
text-transform (en-US) N.V.T. N.V.T.  
Rand en achtergrond
background (en-US) Neen[1] Neen[1]
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
border-radius (en-US) Neen[1] Neen[1]
box-shadow (en-US) 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 (en-US) Ja Ja  
height (en-US) Ja Ja  
border (en-US) Gedeeltelijk Ja  
margin (en-US) Ja Ja  
padding (en-US) Ja Gedeeltelijk[1]
  1. Chrome verbergt de <progress> (en-US) en  <meter> (en-US) elementen wanneer de padding (en-US) eigenschap is toegepast op een element.
Tekst en font
color (en-US) N.V.T. N.V.T.  
font (en-US) N.V.T. N.V.T.  
letter-spacing (en-US) N.V.T. N.V.T.  
text-align (en-US) N.V.T. N.V.T.  
text-decoration (en-US) N.V.T. N.V.T.  
text-indent (en-US) N.V.T. N.V.T.  
text-overflow (en-US) N.V.T. N.V.T.  
text-shadow (en-US) N.V.T. N.V.T.  
text-transform (en-US) N.V.T. N.V.T.  
Rand en achtergrond
background (en-US) Neen[1] Neen[1]
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
border-radius (en-US) Neen[1] Neen[1]
box-shadow (en-US) 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 (en-US) Ja Ja  
height (en-US) 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 (en-US) Neen Ja  
margin (en-US) Ja Ja  
padding (en-US) Gedeeltelijk[1] Ja
  1. padding (en-US) wordt gebruikt maar heeft geen visueel effect.
Tekst en font
color (en-US) N.V.T. N.V.T.  
font (en-US) N.V.T. N.V.T.  
letter-spacing (en-US) N.V.T. N.V.T.  
text-align (en-US) N.V.T. N.V.T.  
text-decoration (en-US) N.V.T. N.V.T.  
text-indent (en-US) N.V.T. N.V.T.  
text-overflow (en-US) N.V.T. N.V.T.  
text-shadow (en-US) N.V.T. N.V.T.  
text-transform (en-US) N.V.T. N.V.T.  
Border and background
background (en-US) Neen[1] Neen[1]
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
border-radius (en-US) Neen[1] Neen[1]
box-shadow (en-US) Neen[1] Neen[1]

Afbeeldingsknoppen

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