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.
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
4.0+ -webkit- | 2.0+ -moz | 3.1+ -webkit- | 15.0+ -webkit- |