Appearance - Propriété CSS

Schéma de la syntaxe de appearance.

Description des termes utilisés sur le schéma :

• compat est l'une des valeurs conservées pour compatibilité.

Description de la propriété appearance.

Alors que la plupart des éléments peuvent être mis en forme par CSS, les contrôles de formulaire sont restitués en fonction du système d'exploitation. Il est alors difficile d'appliquer des styles à ces contrôles. De plus tous les systèmes d'exploitation ne rendent pas les contrôles de la même façon.

La propriété appearance agit sur l'apparence des contrôles de formulaire. Elle peut supprimer tous les styles concernant l'apparence native des contrôles, afin de faciliter l'application de styles.
Remarque : seule l'apparence est concernée, l'élément n'acquiert aucune fonctionnalité supplémentaire (il ne devient pas une case à cocher par exemple).

appearance ne concerne que les contrôles de formulaire.

Valeurs pour appearance.

• appearance: auto;

  L'élément est affiché normalement, tel qu'il est défini par le système d'exploitation.

  
  
  Case à cocher
  Bouton radio Bouton radio
  appearance:auto;
• appearance: none;

  Toutes des propriétés de l'élément sont réinitialisée. La plupart des éléments sont bien affichés sauf les boutons radio et les cases à cocher. Néanmoins, ils sont toujours opérationnels : cliquer sur le label correspondant cochera ou décochera la case bien que rien ne se passe sur l'écran.

  Cependant l'application de styles est compliquée sur des éléments devenus invisibles. Pour les cases à cocher et les boutons radio, on préférera utiliser la valeur base qui laisse tous les éléments visibles.

  
  
  Case à cocher
  Bouton radio Bouton radio
  
  appearance:none;
• appearance: base; ⚠

  Cette valeur est identique à none mais garantit que le contrôle reste visible, y compris les boutons radio et les cases à cocher. Cette solution facilite l'application de styles personnalisés.

  
  
  Case à cocher
  Bouton radio Bouton radio
  appearance:base;
• appearance: base-select; ⚠

  Cette valeur ne concerne que les éléments de type select et le pseudo-élément ::picker(select).

  LundiMardiMercrediJeudiVendrediSamediDimanche

  
  appearance:auto;

  LundiMardiMercrediJeudiVendrediSamediDimanche

  
  appearance:base-select;
• appearance: button; ✗ appearance: checkbox; ✗ appearance: listbox; ✗ appearance: menulist; ✗ appearance: meter; ✗ appearance: progress-bar; ✗ appearance: push-button; ✗ appearance: radio; ✗ appearance: slider-horizontal; ✗ appearance: square-button; ✗ appearance: textarea; ✗ appearance: textfield; ✗ appearance: menulist-button; ✗

  Ces valeurs sont conservées pour des raisons de compatibilité mais ne devraient plus être utilisées. Elles sont de toute façon traitées comme la valeur auto par la plupart des navigateurs.

• appearance: initial; (auto) appearance: inherit; appearance: revert; appearance: revertLayer; appearance: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de appearance.

La propriété appearance peut être animée de façon discrète (passage brutal d'une valeur à l'autre) mais cela ne présente pas un grand intérêt. Voici toutefois un exemple qui anime toutes les valeurs reconnues par appearance.

Exemple interactif avec la propriété appearance.

Cet exemple interactif vous permet d'affecter une valeur à la propriété appearance. On peut s'assurer par exemple que avec la valeur none un clic sur le label d'une case à cocher coche bien celle-ci, ce qui peut être visualisé en revenant sur la valeur auto.

Prise en charge de la propriété appearance par les navigateurs.

La propriété appearance est parmi celle qui a le plus évolué au fil des niveaux de la spécification. La plupart des valeurs sont devenues obsolètes et ne sont conservées que pour des raisons de compatibilité. De nouvelles valeurs sont apparues (base et base-select). Le tableau ci-dessous ne considère pas ces nouvelles valeurs.

Remarques :

(1) La propriété appearance est supporté avec la valeur none mais pas la valeur auto.

1

Propriété
appearance

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

1

Baidu Browser

Opéra

Samsung Internet

Chrome

Safari

Firefox

Safari sur IOS

Edge

Androïd Brower

Firefox pour Androïd

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété appearance.

• Module CSS - Interface utilisateur de base - Niveau 4

  Ce niveau 4 de la spécification reprend les définitions déjà établies au niveau 3. Il apporte également quelques ajouts : la gestion du marqueur de texte est plus fine, plusieurs propriétés concernent le pointeur de souris, etc.

  Concernant appearance. Mise au point au sujet de la propriété appearance : réduction de ses possibilités.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, au sujet de l'interface utilisateur.

Tout ce qui est paramétrable ou stylisable dans l'interface utilisateur est décrit dans la spécification Module CSS - Interface utilisateur de base du W3C.

Propriétés :