Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété CSS appearance indique si un élément doit être affiché grâce au thème natif du système d'exploitation.
| Valeur initiale | auto |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Média | tous |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
| Ordre canonique | selon la grammaire |
Syntaxe
/* Valeurs avec un mot-clé */ appearance: auto; appearance: none; /* Valeurs globales */ appearance: inherit; appearance: initial; appearance: unset;
Valeurs
auto- L'agent utilisateur peut afficher les contrôles de formulaire avec les contrôles natifs du système d'exploitation ou avec une apparence qui ne pourrait pas être obtenue grâce à CSS. Pour les éléments qui sont des contrôles de formulaire et pour lesquels la valeur calculée vaut
auto, les agents utilisateur peuvent décider d'ignorer certaines propriétés CSS afin de garantir l'affichage souhaité. Toutefois, les propriétés suivantes doivent toujours être respectées : none- Les contrôles de formulaire ne ressemblent pas à des contrôles natifs. Ce sont alors des éléments non-remplacés. Les éléments sont affichés selon les règles CSS classiques. En dehors des contrôles de formulaire, aucun autre élément remplacé n'est affecté.
Syntaxe formelle
auto | none
Exemples
CSS
.no-appearance {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
HTML
<div>
<p>With default appearance</p>
<input />
<input type="checkbox" />
<input type="radio">
<select>
<option value="1">Option 1</option>
</select>
</div>
<div>
<p>Avec <code>appearance: none;</code></p>
<input class="no-appearance" />
<input type="checkbox" class="no-appearance" />
<input type="radio" class="no-appearance" />
<select class="no-appearance">
<option value="1">Option 1</option>
</select>
</div>
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Basic User Interface Module Level 4 La définition de 'appearance' dans cette spécification. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Support simple | 1.0-webkit[1] | 20 (12.10240)-webkit[2] | 1.0 (1.7 ou moins)-moz[3] 54.0 (54.0)[4] |
Pas de support | 15-webkit[1] | 3.0-webkit[1] |
auto |
Pas de support | Pas de support | Pas de support | Pas de support | Pas de support | Pas de support |
| Fonctionnalité | Android | Webview Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Support simple | (Oui) | (Oui)-webkit[1] | (Oui)-webkit | (Oui)-moz[3] 54.0 (54.0)[4] |
11[2] | 37 | (Oui)-webkit[1] |
auto |
Pas de support | Pas de support | Pas de support | Pas de support | Pas de support | Pas de support | Pas de support |
[1] WebKit et Blink prennent en charge la propriété -webkit-appearance avec la valeur standard none et d'autres valeurs spécifiques. Gecko prend en charge la propriété -moz-appearance avec la valeur standard none et d'autres valeurs spécifiques. Gecko supporte également -webkit-appearance comme synonyme de -moz-appearance pour des raisons de compatibilité web.
[3] Edge et IE Phone prennent en charge la propriété -webkit-appearance pour des raisons de compatibilité web. Ils prennent en charge la valeur standard none ainsi que d'autres valeurs spécifiques.
[4] Cette propriété est gérée via la préférence layout.css.appearance.enabled et -moz-appearance est gérée via layout.css.moz-appearance.enabled. Ces deux préférences valent true par défaut. Une version préfixée par -webkit a été ajoutée pour appearance.