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	Oui	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`	Partiel	Oui	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é.
`margin`	Oui	Oui
`padding`	Partiel	Oui	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é.
Texte et polices
`color`	Oui	Oui	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	Partiel	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	Oui	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	Oui	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é. Sur Opera la propriété `border-radius` n'est appliquée que si une bordure est explicitement définie.
`box-shadow`	Non	Partiel	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	Oui	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	Oui	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	Yes	Sur Opera la propriété `border-radius` n'est appliquée que si une bordure est explicitement définie.
`box-shadow`	Non	Partiel	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	Partiel	Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
`border`	Oui	Oui
`margin`	Oui	Oui
`padding`	Partiel	Partiel	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	Non	Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
`height`	Non	Non	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	Partiel	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	Partiel	La propriété est appliquée, mais de manière incohérente entre navigateurs sous Mac OSX. 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	Partiel	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	Partiel	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	Partiel	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	No	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	Partiel	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	Partiel	La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément `<select>`. IE9 ne prend pas en charge cette propriété.
`text-overflow`	Non	Non
`text-shadow`	Partiel	Partiel	La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément `<select>`. IE9 ne prend pas en charge cette propriété.
`text-transform`	Partiel	Partiel	La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément `<select>`.
Bordure et arrière-plan
`background`	Partiel	Partiel	La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément `<select>`.
`border-radius`	Partiel	Partiel
`box-shadow`	Non	Partiel

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	Partiel	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	Partiel	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	No	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	No	Uniquement pris en charge par Firefox et IE9+.
`text-indent`	Non	Non
`text-overflow`	Non	Non
`text-shadow`	Non	Non
`text-transform`	Partiel	Partiel	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	Yes	Sur Opera la propriété `border-radius` n'est appliquée que si une bordure est explicitement définie.
`box-shadow`	Non	Partiel	IE9 ne prend pas en charge cette propriété.

Datalist

Propriété	N	A
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	No	Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
`letter-spacing`	Partiel	Partiel	Beaucoup de navigateurs appliquent cette propriété sur le bouton de sélection.
`text-align`	Non	Non
`text-decoration`	Non	Non
`text-indent`	Partiel	Partiel	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	No	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	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
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	Oui	Opera gère cette propriété comme pour un widget `select` avec les mêmes restrictions.
`border`	Oui	Oui
`margin`	Oui	Oui
`padding`	No	Oui	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	No	Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
`border-radius`	No	No
`box-shadow`	No	No

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	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	No	Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
`border-radius`	No	No
`box-shadow`	No	No

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	Partiel	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	Oui	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	No	Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
`border-radius`	No	No
`box-shadow`	No	No

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	Partiel	IE9 ne prend pas en charge cette propriété.
`box-shadow`	Partiel	Partiel	IE9 ne prend pas en charge cette propriété.

Dans ce module

Mon premier formulaire HTML
Comment structurer un formulaire HTML
Les widgets natifs pour formulaire
Envoi des données de formulaire
Validation des données de formulaire
Comment construire des widgets personnalisés pour formulaire
Envoi de formulaires à l'aide du JavaScript
Formulaires HTML dans les navigateurs anciens
Mise en forme des formulaires HTML
Mise en forme avancée des formulaires HTML
Table de compatibilité des propriétés pour les widgets de formulaire