MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

appearance

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 initialeauto
Applicabilitétous les éléments
Héritéenon
Médiatous
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniqueselon 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.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,