Propriété CSS appearance

La propriété appearance en CSS sert à contrôler l’apparence des contrôles de formulaire tels que les boutons, cases à cocher, boutons radio, et autres. Elle permet de modifier le style des contrôles natifs de l’interface utilisateur, offrant un rendu cohérent d’un navigateur et d’un appareil à l’autre. Dans le développement web moderne, appearance: none est le principal cas d’utilisation pour personnaliser les contrôles de formulaire, tandis que les autres valeurs sont en grande partie obsolètes ou non standard.

Les propriétés -webkit-appearance et -moz-appearance sont des extensions propriétaires spécifiques aux éditeurs, utilisées pour appliquer un style natif à la plateforme en fonction du thème du système d’exploitation. Elles ne font pas partie de la spécification CSS officielle du W3C et sont principalement prises en charge par les navigateurs basés sur WebKit (Safari, Chrome) et sur Gecko (Firefox), respectivement.

Si cette propriété est utilisée sur des sites web, elle doit être testée avec prudence. L’implémentation de la propriété appearance peut être assez différente, surtout dans les anciens navigateurs. Mais dans les navigateurs plus récents, il n’y a que de petites différences.

WARNING

Notez que la propriété "appearance" n’est pas prise en charge par tous les navigateurs, et que son comportement peut varier selon le navigateur et le système d’exploitation. De plus, modifier l’apparence des contrôles de formulaire peut affecter l’utilisabilité et l’accessibilité de votre site web, il est donc important de l’utiliser avec discernement.

Initial Value	normal
Applies to	All elements.
Inherited	No.
Animatable	Yes.
Version	CSS3
DOM Syntax	object.style.appearance = "none";

Syntaxe

Syntaxe de la propriété CSS appearance

css

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;

note
Seuls none et auto sont largement pris en charge dans les navigateurs modernes. Les autres valeurs sont en grande partie obsolètes ou non standard.

Exemple de la propriété appearance :

Exemple de la propriété CSS appearance avec la valeur button

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .custom-checkbox input[type="checkbox"] {
        -webkit-appearance: none; /* remove default appearance on Webkit-based browsers */
        -moz-appearance: none; /* remove default appearance on Mozilla-based browsers */
        appearance: none; /* remove default appearance on all other browsers */
        width: 20px;
        height: 20px;
        border: 2px solid #333;
        border-radius: 3px;
        outline: none;
        cursor: pointer;
        margin-right: 10px;
      }

      .custom-checkbox input[type="checkbox"]:checked + label::before {
        content: "\2714"; /* Unicode checkmark symbol */
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        background-color: #333;
        border-radius: 2px;
        margin-right: 8px;
      }
    </style>
  </head>
  <body>
    <span class="custom-checkbox">
      <input type="checkbox" id="myCheckbox" name="myCheckbox" />
      <label for="myCheckbox">Checkbox</label>
    </span>
  </body>
</html>

Try it Yourself »

Dans cet exemple, nous supprimons d’abord l’apparence par défaut de la case à cocher en définissant la propriété appearance sur none. Nous définissons ensuite l’apparence personnalisée de la case à cocher à l’aide de règles CSS.

La case à cocher a une largeur et une hauteur de 20 pixels, une bordure solide de 2 pixels et un border-radius de 3 pixels pour lui donner des coins arrondis. Nous définissons également la propriété outline sur none afin de supprimer le contour qui apparaît autour de la case à cocher lorsqu’elle est focalisée.

Pour afficher une coche lorsque la case à cocher est cochée, nous utilisons le pseudo-élément ::before sur le <label> adjacent pour créer une boîte de contenu avec le symbole de coche Unicode (\2714) comme contenu. Nous donnons à cette boîte une largeur et une hauteur de 20 pixels, une couleur d’arrière-plan #333 et un border-radius de 2 pixels pour lui donner l’apparence d’un carré arrondi. Nous définissons également la couleur du texte en blanc pour faire ressortir la coche sur le fond sombre.

note
Pour une personnalisation simple de la couleur des contrôles de formulaire, le CSS moderne recommande d’utiliser la propriété accent-color plutôt que appearance: none. Elle nécessite moins de code et conserve les fonctionnalités natives d’accessibilité.

Valeurs

note
Seuls none et auto sont des valeurs standard et largement prises en charge. Les autres valeurs sont en grande partie obsolètes ou non standard dans les navigateurs modernes.

Value	Description
none	Supprime tout style spécifique à la plateforme. Note : `normal` est la vraie valeur initiale, pas `none`.
auto	L’agent utilisateur sélectionne le style spécial approprié en fonction de l’élément. Se comporte comme `none` sur les éléments sans style spécial.
icon	Une petite image représentant un objet, souvent avec un nom ou une étiquette.
window	Une zone d’affichage, une surface encadrée utilisée pour présenter des objets et du contenu à l’utilisateur pour la consultation et l’interaction.
button	Un petit objet généralement étiqueté avec du texte qui représente un choix de l’utilisateur.
menu	Un ensemble d’options parmi lesquelles l’utilisateur peut choisir, éventuellement plusieurs à la fois. Il existe plusieurs types spécifiques de menus.
field	Une zone fournie pour qu’un utilisateur saisisse ou modifie une valeur, généralement à l’aide d’un clavier. Il existe plusieurs champs spéciaux.
desktop	Une fenêtre utilisée pour représenter un système dans son ensemble, qui contient souvent d’autres fenêtres.
workspace	Une fenêtre utilisée pour représenter un projet ou une application pouvant contenir d’autres fenêtres, généralement avec une barre de titre affichant le nom du projet ou de l’application.
document	Une fenêtre utilisée pour représenter un document utilisateur, généralement avec une barre de titre affichant son nom. Peut aussi être utilisée pour représenter des dossiers ou répertoires dans un système de fichiers.
tooltip	Une fenêtre utilisée pour afficher temporairement des informations ou de l’aide sur un objet. Aussi appelée "info" dans les couleurs système CSS2.
dialogue	Une fenêtre utilisée pour présenter une notification ou des alternatives que l’utilisateur peut choisir dans le cadre d’une action effectuée par l’utilisateur. Aussi appelée "message-box" dans les polices système CSS2.
push-button	Un bouton entouré d’une bordure, souvent biseautée pour paraître en trois dimensions, comme s’il était en relief. Aussi appelé "caption" dans les polices système CSS2.
hyperlink	Un bouton qui représente un lien hypertexte, souvent aussi simple qu’un texte normal souligné et éventuellement coloré différemment.
radio-button	Un bouton qui indique s’il est coché ou non avec un petit cercle à côté de l’étiquette du bouton. Un point peut apparaître à l’intérieur du cercle lorsque le bouton est coché. Un état indéterminé (ni coché ni décoché) peut être indiqué par un autre graphique dans le cercle.
checkbox	L’élément est dessiné comme une case à cocher, en incluant uniquement la partie réelle "checkbox".
menu-item	Un choix au sein d’un menu, qui peut aussi servir d’étiquette pour un menu imbriqué (hiérarchique).
tab	Un bouton représentant l’étiquette d’un panneau dans une interface à onglets.
menubar	Un menu de menus, généralement disposé de manière linéaire, dans une barre horizontale.
outline-tree	Un menu où les options peuvent être affichées ou masquées à l’aide de petits widgets, souvent représentés par un petit triangle ou des signes plus et moins.
range	Un contrôle qui affiche l’option actuelle, éventuellement de manière graphique, et permet à l’utilisateur de sélectionner d’autres options, par exemple en faisant glisser un curseur ou en tournant un bouton.
signature	Un champ pour saisir une signature.
password	Un champ pour saisir un mot de passe. Le texte est généralement affiché sous forme de points ou de cases pour masquer la valeur.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Practice

Quelle est la fonction de la propriété CSS appearance ?

Elle est utilisée pour modifier le style système par défaut des contrôles de formulaire.Elle est utilisée pour modifier la couleur d’arrière-plan d’une page.Elle automatise le processus de validation des formulaires.Elle fournit un moyen d’appliquer un style natif en fonction de la plateforme de l’utilisateur.Elle est utilisée pour créer des animations en CSS.

Propriété CSS appearance ​

Syntaxe ​

Exemple de la propriété appearance : ​

Valeurs ​

Practice ​

Propriété CSS appearance

Syntaxe

Exemple de la propriété appearance :

Valeurs

Practice