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 :


```css
\* {
  /\* 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é.
 |