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.
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.
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 :
* {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
}
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.
Propriété |
N |
A |
Note |
Modèle de boîte CSS |
width |
Oui |
Oui |
|
height |
Partiel[1][2] |
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[1][2] |
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[1][2] |
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 [1] |
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[1] |
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[1] |
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[1][2] |
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[1] |
- IE9 ne prend pas en charge cette propriété.
|
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.
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] |
- 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] |
- 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[1] |
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[1] |
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[1] |
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[1] |
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[1] |
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[1][2] |
Partiel[1][2] |
- 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[1][2] |
Partiel[1][2] |
- 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[1] |
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[1] |
Partiel[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] |
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] |
- 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] |
- 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] |
- 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] |
- 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é.
|
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.
Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des comportements fiables.
Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des comportements fiables.
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
.