Table de compatibilité des propriétés pour les widgets de formulaire

Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.

Comment lire les tables

Valeurs

Pour chaque propriété, il y a quatre valeurs possibles :

OUI
La prise en charge de la propriété est raisonnablement cohérente d'un navigateur à l'autre. Il se peut que vous soyez encore confronté à des effets collatéraux étranges dans certains cas limites.
PARTIEL
Bien que la propriété soit acceptée, vous pouvez fréquemment être confronté à des effets collatéraux bizarres ou à des incohérences. Vous devriez probablement éviter ces propriétés si vous n'avez pas d'abord maîtrisé ces effets secondaires.
NON
La propriété ne fonctionne tout simplement pas ou est si incohérente qu'elle n'est pas fiable.
N.A.
La propriété n'a aucune signification pour ce type de widget.

Rendu

Pour chaque propriété il y a deux rendus possibles :

N (Normal)
Indique que la propriété est appliquée telle quelle.
A (Altéré)
Indique que la propriété est appliquée avec la règle supplémentaire ci-dessous :
* {
/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur WebKit. */
  -webkit-appearance: none;

/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur Gecko. */
  -moz-appearance: none;

/* Ceci désactive l'aspect et le comportement natif sur plusieurs divers navigateurs
   y compris Opera, Internet Explorer et Firefox */
  background: none;
}

Tables de compatibilité

Comportements globaux

Certains comportements sont communs à de nombreux navigateurs au niveau global :

border, background, border-radius, height
L'utilisation de l'une de ces propriétés peut désactiver partiellement ou totalement l'aspect natif des widgets sur certains navigateurs. Prudence lorsque vous les utilisez.
line-height
Cette propriété est prise en charge de manière non cohérente d'un navigateur à l'autre et vous devriez l'éviter.
text-decoration
Cette propriété n'est pas prise en charge par Opera sur les widgets de formulaire.
text-overflow
Opera, Safari et IE9 ne prennent pas en charge cette propriété sur les widgets de formulaire.
text-shadow
Opera ne prend pas en charge text-shadow sur les widgets de formulaire et IE9 ne le prend pas du tout en charge.

Champs texte

Propriété N A Note
Modèle de boîte CSS
width Oui Oui  
height Partiel[1][2] Oui
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
border Partiel[1][2] Oui
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
margin Oui Oui  
padding Partiel[1][2] Oui
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
Texte et polices
color[1] Oui Oui
  1. Si la propriété border-color n'est pas mentionnée, certains navigateurs fondés sur WebKit appliqueront la propriété color aussi bien à la bordure qu'à la police avec l'élément <textarea>.
font Oui Oui Voir la note à propos de line-height
letter-spacing Oui Oui  
text-align Oui Oui  
text-decoration Partiel Partiel Voir la note à propos de Opera
text-indent Partiel[1] Partiel[1]
  1. IE9 prend en charge cette propriété uniquement sur les éléments <textarea>, alors que Opera ne la prend en charge que sur les champs texte sur une ligne.
text-overflow Partiel Partiel  
text-shadow Partiel Partiel  
text-transform Oui Oui  
Bordure et arrière-plan
background Partiel[1] Oui
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
border-radius Partiel[1][2] Oui
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
  2. Sur Opera la propriété border-radius n'est appliquée que si une bordure est explicitement définie.
box-shadow Non Partiel[1]
  1. IE9 ne prend pas en charge cette propriété.

Boutons

Propriété N A Note
Modèle de boîte CSS
width Oui Oui  
height Partiel[1] Oui
  1. Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.
border Partiel Oui  
margin Oui Oui  
padding Partiel[1] Oui
  1. Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.
Texte et polices
color Oui Oui  
font Oui Oui Voir la note à propos de line-height.
letter-spacing Oui Oui  
text-align Non Non  
text-decoration Partiel Oui  
text-indent Oui Oui  
text-overflow Non Non  
text-shadow Partiel Partiel  
text-transform Oui Oui  
Bordure et arrière-plan
background Oui Oui  
border-radius Yes[1] Yes[1]
  1. Sur Opera la propriété border-radius n'est appliquée que si une bordure est explicitement définie.
box-shadow Non Partiel[1]
  1. IE9 ne prend pas en charge cette propriété.

Widget number

Sur les navigateurs qui implémentent le widget number, il n'y a pas de méthode standard pour changer le style des roulettes utilisées pour changer la valeur du champ. Il est à noter que les roulettes de Safari sont en dehors du champ.

Propriété N A Note
Modèle de boîte CSS
width Oui Oui  
height Partiel[1] Partiel[1]
  1. Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
border Oui Oui  
margin Oui Oui  
padding Partiel[1] Partiel[1]
  1. Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
Texte et polices
color Oui Oui  
font Oui Oui Voir la note à propos de line-height.
letter-spacing Oui Oui  
text-align Oui Oui  
text-decoration Partiel Partiel  
text-indent Oui Oui  
text-overflow Non Non  
text-shadow Partiel Partiel  
text-transform N.A. N.A.  
Bordure et arrière‑plan
background Non Non

Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
border-radius Non Non
box-shadow Non Non

Cases à cocher et boutons radio

Propriété N A Note
Modèle de boîte CSS
width Non[1] Non[1]
  1. Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
height Non[1] Non[1]
  1. Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
border Non Non  
margin Oui Oui  
padding Non Non  
Texte et polices
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.  
Bordure et arrière-plan
background Non Non  
border-radius Non Non  
box-shadow Non Non  

Boîtes à sélection (ligne unique)

Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <select>.

Propriété N A Note
Modèle de boîte CSS
width Partiel[1] Partiel[1]
  1. Cette propriété est correcte sur l'élément <select>, mais cela peut ne pas être le cas sur les éléments <option> ou <optgroup>.
height Non Oui  
border Partiel Oui  
margin Oui Oui  
padding Non[1] Partiel[2]
  1. La propriété est appliquée, mais de manière incohérente entre navigateurs sous Mac OSX.
  2. La propriété est bien appliquée sur l'élément <select>, mais est traitée de manière incohérente sur les éléments <option> et <optgroup>.
Texte et polices
color Partiel[1] Partiel[1]
  1. Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments <option> et <optgroup>.
font Partiel[1] Partiel[1]
  1. Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments <option> et <optgroup>.
letter-spacing Partiel[1] Partiel[1]
  1. IE9 ne prend pas en charge cette propriété sur les éléments <select>, <option>, et <optgroup> ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments <option> et <optgroup>.
text-align No[1] No[1]
  1. IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété pour ce widget.
text-decoration Partiel[1] Partiel[1]
  1. Seul Firefox fournit une prise en charge totale de cette propriété. Opera ne la prend pas du tout en charge et d'autres navigateur ne le font que pour l'élément  <select>.
text-indent Partiel[1][2] Partiel[1][2]
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément <select>.
  2. IE9 ne prend pas en charge cette propriété.
text-overflow Non Non  
text-shadow Partiel[1][2] Partiel[1][2]
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément <select>.
  2. IE9 ne prend pas en charge cette propriété.
text-transform Partiel[1] Partiel[1]
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément <select>.
Bordure et arrière-plan
background Partiel[1] Partiel[1]
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément <select>.
border-radius Partiel[1] Partiel[1]
box-shadow Non Partiel[1]

Boîtes à sélection (multilignes)

Propriété N A Note
Modèle de boîte CSS
width Oui Oui  
height Oui Oui  
border Oui Oui  
margin Oui Oui  
padding Partiel[1] Partiel[1]
  1. Opera ne prend pas en charge padding-top et padding-bottom sur l'élément <select>.
Texte et polices
color Oui Oui  
font Oui Oui Voir la note à propos de line-height.
letter-spacing Partiel[1] Partiel[1]
  1. IE9 ne prend pas en charge cette propriété sur les éléments <select>, <option>, et <optgroup> ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments <option> et <optgroup>.
text-align No[1] No[1]
  1. IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété sur ce widget.
text-decoration No[1] No[1]
  1. Uniquement pris en charge par Firefox et IE9+.
text-indent Non Non  
text-overflow Non Non  
text-shadow Non Non  
text-transform Partiel[1] Partiel[1]
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément <select>.
Bordure et arrière-plan
background Oui Oui  
border-radius Yes[1] Yes[1]
  1. Sur Opera la propriété border-radius n'est appliquée que si une bordure est explicitement définie.
box-shadow Non Partiel[1]
  1. IE9 ne prend pas en charge cette propriété.

Datalist

Propriété N A Note
Modèle de boîte CSS
width Non Non  
height Non Non  
border Non Non  
margin Non Non  
padding Non Non  
Texte et polices
color Non Non  
font Non Non  
letter-spacing Non Non  
text-align Non Non  
text-decoration Non Non  
text-indent Non Non  
text-overflow Non Non  
text-shadow Non Non  
text-transform Non Non  
Bordure et arrière-plan
background Non Non  
border-radius Non Non  
box-shadow Non Non  

Sélecteur de fichiers

Propriété N A Note
Modèle de boîte CSS
width Non Non  
height Non Non  
border Non Non  
margin Oui Oui  
padding Non Non  
Texte et polices
color Oui Oui  
font No[1] No[1]
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
letter-spacing Partiel[1] Partiel[1]
  1. Beaucoup de navigateurs appliquent cette propriété sur le bouton de sélection.
text-align Non Non  
text-decoration Non Non  
text-indent Partiel[1] Partiel[1]
  1. Agit plus ou moins comme une marge supplementaire en dehors du widget.
text-overflow Non Non  
text-shadow Non Non  
text-transform Non Non  
Bordure et arrière-plan
background No[1] No[1]
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
border-radius Non Non  
box-shadow Non Partiel[1]
  1. IE9 ne prend pas en charge cette propriété.

Sélecteurs de date

Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.

Propriété N A Note
Modèle de boîte CSS
width Non Non  
height Non Non  
border Non Non  
margin Oui Oui  
padding Non Non  
Texte et polices
color Non Non  
font Non Non  
letter-spacing Non Non  
text-align Non Non  
text-decoration Non Non  
text-indent Non Non  
text-overflow Non Non  
text-shadow Non Non  
text-transform Non Non  
Bordure et arrière-plan
background Non Non  
border-radius Non Non  
box-shadow Non Non  

Sélecteurs de couleurs

Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des comportements fiables.

Propriété N A Note
Modèle de boîte CSS
width Oui Oui  
height No[1] Oui
  1. Opera gère cette propriété comme pour un widget select avec les mêmes restrictions.
border Oui Oui  
margin Oui Oui  
padding No[1] Oui
  1. Opera gère cette propriété comme pour un widget select avec les mêmes restrictions.
Texte et polices
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.  
Bordure et arrière-plan
background No[1] No[1]
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
border-radius No[1] No[1]
box-shadow No[1] No[1]

Widgets meter et progress

Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des comportements fiables.

Propriété N A Note
Modèle de boîte CSS
width Oui Oui  
height Oui Oui  
border Partiel Oui  
margin Oui Oui  
padding Oui Partiel[1]
  1. Chrome cache les éléments <progress> et <meter> quand la propriété padding est appliquée sur un élément altéré.
Texte et polices
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.  
Bordure et arrière-plan
background No[1] No[1]
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
border-radius No[1] No[1]
box-shadow No[1] No[1]

Widget range

Il n'y a pas de méthode standard pour changer le style de la poignée de range et Opera n'a aucun moyen de modifier le rendu par défaut du widget range.

Propriété N A Note
Modèle de boîte CSS
width Oui Oui  
height Partiel[1] Partiel[1]
  1. Chrome et Opera ajoutent quelque espace supplémentaire autour du widget, alors que Opera sous Windows 7 réduit la poignée de range.
border Non Oui  
margin Oui Oui  
padding Partiel[1] Oui
  1. La propriété padding est appliquée, mais elle n'a aucun effet visible.
Texte et polices
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.  
Bordure et arrière-plan
background No[1] No[1]
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
border-radius No[1] No[1]
box-shadow No[1] No[1]

Boutons image

Propriété N A Note
Modèle de boîte CSS
width Oui Oui  
height Oui Oui  
border Oui Oui  
margin Oui Oui  
padding Oui Oui  
Texte et polices
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.  
Bordure et arrière-plan
background Oui Oui  
border-radius Partiel[1] Partiel[1]
  1. IE9 ne prend pas en charge cette propriété.
box-shadow Partiel[1] Partiel[1]
  1. IE9 ne prend pas en charge cette propriété.

Dans ce module