Appearance - Propriété CSS

Schéma de la syntaxe de appearance.

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

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

Description de la propriété appearance.

Cette propriété accepte de nombreuses valeurs pour des raisons de compatibilité, mais la plupart de ces valeurs sont maintenant obsolètes.

La propriété appearance agit sur l'apparence des zones de saisie. Elle définit globalement plusieurs propriétés d'apparence de façon à faire ressembler l'élément à un élément prédéfini tel qu'un bouton, une case à cocher, etc.
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).

Avec la valeur none la propriété appearance peut être utilisée pour ré-initialiser toutes les propriétés d'un élément standard, ce qui permet de reprendre sa stylisation par CSS.

Valeurs pour appearance.

• appearance: none;

  Toutes des propriétés de l'élément sont réinitialisée (mais l'élément est bien affiché).

  Bouton radio

  appearance:auto;

  Bouton radio

  appearance:none;

• appearance: auto;

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

• appearance: textfield;

  Ne concerne que les éléments du type search. L'élément est restitué comme une zone de texte normale (type="text").

  appearance:auto;

  appearance:textfiled;

• appearance: menulist-button;

  Ne concerne que les listes déroulantes. L'élément est restitué avec son bouton de déroulement de la liste, mais pas nécessairement formaté comme le système le prévoit.

  Voici un exemple d'utilisation :

  * {appearance:none;} select {appearance:menulist-button;}
  Valeur 1Valeur 2Valeur 3

  appearance:auto;

  Valeur 1Valeur 2Valeur 3

  appearance:menulist-button;

• 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; ✗

  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; (none) 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.

Exemple interactif avec la propriété appearance.

Cet exemple interactif vous permet d'affecter une valeur à la propriété appearance. Il reprend toutes les valeurs de appearance mais seules les valeurs none, textfield et menulist-button auront un effet visible.
La valeur textfield agit sur les zones de saisie du type search. La valeur menulist-button est visible sur les les listes déroulantes.
Les autres valeurs ne sont conservées que pour des raisons de compatibilité : elles sont équivalentes à auto.

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

Bien que toujours standardisée, la propriété appearance est peu à peu vidée de son intérêt. Seules quatre valeurs sont toujours standardisées, les autres valeurs étant assimilées à auto. D'autre part, les restitutions sont très différentes d'un navigateur à l'autre : le fait de définir appearance:button ne garantit pas que la restitution sera identique sur tous les navigateurs et tous les systèmes.

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

  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 :