Appearance - Propriété CSS

appearance

Résumé des caractéristiques de la propriété appearance

Description rapide
Définit toutes les propriétés nécessaires pour qu'un élément soit affiché comme un bouton, un menu, etc.
Statut
Problèmes de compatibilité
Utilisable sur
HTML
Valeurs prédéfinies
auto | none | textfield | menulist-button | searchfield | textarea | checkbox | radio | menulist | listbox | meter | progress-bar | button
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété appearance passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Interface utilisateur de base
Références (W3C)
Statut du document: WD (document de travail)

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 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).

La propriété appearance peut être utilisée pour ré-initialiser toutes les propriétés d'un élément standard : lui redonner son aspect habituel.

Syntaxes pour appearance.

  • appearance: none;

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

  • appearance: auto;

    L'élément est affiché normalement, tel qu'il est défini par la feuille de styles du navigateur.

  • appearance: textfield; 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.

Valeurs communes à toutes les propriétés :

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 interactif avec la propriété appearance.

appearance :




Permis voiture Permis moto

Homme   Femme

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.

Colonne 1
Support de la propriété appearance au moins avec les valeurs none et auto.

Remarques :

(1) La propriété appearance est supporté avec la valeur none mais pas 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

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

Historique de la propriété appearance.

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 CSS Basic User Interface Module du W3C.

Propriétés :

accent-color
Définit la couleur des élément actifs, cochés.
caret
Définit la couleur et la forme du marqueur de texte.
caret-color
Choisit la couleur du marqueur de texte (curseur clignotant).
caret-shape
Définit la forme du curseur de texte.
cursor
Définit la forme du curseur de la souris.
ime-mode
Définit l'accessibilité d'une zone de saisie.
outline
Résumé des caractéristiques du contour.
outline-color
Définit la couleur du contour (outline).
outline-offset
Définit l'espacement entre le contour et l'élément.
outline-style
Définit le type de trait des contours (simple, double, pointillé...).
outline-width
Définit l'épaisseur du trait des contours.
resize
Autorise ou empêche le dimensionnement de l'élément. par l'utilisateur.
user-select
Définit si le contenu d'un élément est sélectionnable par l'utilisateur ou non.