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
  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 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 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 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 Partiel
  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 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 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. 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
  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 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 Yes
  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. 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
  1. Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
border Oui Oui  
margin Oui Oui  
padding Partiel Partiel
  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 Non
  1. Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
height Non Non
  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 Partiel
  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 Partiel
  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 Partiel
  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 Partiel
  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 Partiel
  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 No
  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 Partiel
  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 Partiel
  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 Partiel
  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 Partiel
  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 Partiel
  1. 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
  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 Partiel
  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 No
  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 No
  1. Uniquement pris en charge par Firefox et IE9+.
text-indent Non Non  
text-overflow Non Non  
text-shadow Non Non  
text-transform Partiel Partiel
  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 Yes
  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. 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 No
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
letter-spacing Partiel Partiel
  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 Partiel
  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 No
  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. 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 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 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 No
  1. 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
  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 No
  1. 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
  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 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 No
  1. 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
  1. IE9 ne prend pas en charge cette propriété.
box-shadow Partiel Partiel
  1. IE9 ne prend pas en charge cette propriété.

Dans ce module