Propriété CSS appearance

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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.