Propriété CSS appearance

La propriété CSS appearance afin d'afficher un élément en utilisant la mise en forme native basée sur le thème du système d'exploitation de l'utilisateur.

La propriété CSS -moz-appearance est utilisée dans Gecko (Firefox) afin d'afficher un élément en utilisant la mise en forme native basée sur le thème du système d'exploitation.

La propriété CSS -webkit-appearance est une extension CSS propriétaire supportée par moteur de navigateur WebKit. Les extensions WebKit contiennent le préfixe -webkit-, qui indique qu'il appartient à la structure de la source ouverte WebKit.

Bien que la propriété -webkit-appearance ne fasse pas une partie de la spécification de W3C CSS officielle, elle est formée pour fonctionner sur les navigateurs qui sont alimentés par le moteur de navigateur WebKit, tels que Apple Safari et Google Chrome.

Cette propriété est obsolète.
Valeur initiale auto
Appliquée à Tous les éléments.
Héritée Non.
Animable Oui.
Version CSS3
Syntaxe DOM object.style.Appearance = "none";

Syntaxe

appearance: none | auto | initial | inherit | icon | window | button | menu | field | desktop | workspace | document | tooltip | dialogue | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menubar | outline-tree | range | signature | password;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      width: 80px;
      height: 25px;
      text-align: center;
      -webkit-appearance: button; 
      -moz-appearance: button; 
      appearance: button; 
      }
    </style>
  <body>
    <h2>Exemple de la propriété appearance</h2>
    <p>Voici un...</p>
    <div>
    Bouton?</div
    </head>
  </body>

Valeurs

Valeur Description
none C'est par défaut. Aucun style spécial.
auto L'agent d'utilisateur sélécte le stylement spécial approprié, basé sur l'élément. Cela execute comme none sur les éléments sans le style spécial.
icon Un petit image représentant un objet, souvent avec un nom ou un étiquette.
window Une fenêtre d'affichage, un surface cadré, utilisé pour présenter d'objets et du contenu pour visionner et interagir.
button Un petit objet, souvent étiqué avec un texte qui représente un choix d'utilisateur.
menu Une collection des option pour que l'utilisateur choisisse, peut-être une ou plusieurs fois. Il y a quelques types spécifiques des menus.
field Un secteur fourni pour un utilisateur pour qu'il entre ou modifie une valeur, typiquement en utilisant un clavier. Il y a quelques zones.
desktop Une fenêtre utilisée pour représenter un système complèt qui comprend souvent d'autres fenêtres.
workspace Une fenêtre utilisée pour représenter un projet ou une application qui peut contenir d'autres fenêtres, typiquement avec une barre de titre qui affiche le nom du projet ou de l'application.
document Une fenêtre utilisée pour représenter un document d'utilisateur, typiquement avec une barre de titre qui affiche son nom. Cela peut également être utilisé pour représenter des fichiers ou diréctoires dans un système de fichiers.
tooltip Une fenêtre qui est utilisée pour afficher provisoirement d'information ou aide sur un objet. Cela est appellé également "info" dans les couleur de système CSS2.
dialogue Une fenêtre utilisée pour présenter une notiification ou des altérnatives pour l'utilisateur pour choisir comme une partie d'une action fait par l'utilisateur. Cela est appellé également "message-box" dans des polices de système CSS2.
push-button Un bouton, qui a une bordure autour de lui, souvent biseautée pour apparaitre three dimensional, as if it is raised. Also called "caption" in CSS2 system fonts.
hyperlink Un bouton qui représente un lien hypertexte, souvent comme un texte normal qui est souligné et peut-être couleuré différemment.
radio-button Un bouton, qui affiche si c'est contrôlé avec un petit cercle à côté de l'étiquette de bouton. Il peut être un disque dans le cercle, quand le bouton est contrôlé. L'état indéterminé (ni contrôlé, ni non contrôlé) peut être indiqué avec quelque autre graphique dans le cercle.
checkbox L'élément est dessiné comme une casse, y compris seulement la portion de "checkbox" actuel.
menu-item Un choix dans le menu, qui peut également executer comme un étiquette pour un menu imbriqué (hiérarchique).
tab Un bouton représentant l'étiquette pour un volet dans l'interface à onglet.
menubar Un menu des menus, typiquement rangé linéaire, dans une barre horizontale.
outline-tree Un menu, où les options peuvent être affichées ou masquées avec des petits widgets, souvent représentés par un petit triangulaire ou les signes de plus ou minus.
range Un contrôle, qui affiche l'option actuelle, peut-être graphiquement, et permet l'utilisateur de sélecter d'autres options, peut-être en draguant le curseur ou en tournant un bouton.
signature Une zone pour entrer la signature.
password Une zone pour entrer le mot de passe. Typiquement, le texte est rendu comme une collection des balles ou boîtes pour obscurcir la valeur.
initial Fait la propriété utiliser sa valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
4.0+ -webkit- 2.0+ -moz 3.1+ -webkit- 15.0+ -webkit-

Pratiquez vos connaissances

Quel est le rôle de la propriété 'appearance' dans CSS?
Trouvez-vous cela utile?