La propriété CSS appearance

La propriété appearance en CSS permet de contrôler l'apparence des contrôles de formulaire tels que les boutons, les cases à cocher, les boutons radio et d'autres éléments. Elle vous permet de modifier le style des contrôles d'interface utilisateur natifs, garantissant un aspect et un comportement cohérents entre les différents navigateurs et appareils. 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 largement dépréciées ou non standard.

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

Si cette propriété est utilisée sur des sites web, elle doit être testée avec précaution. L'implémentation de la propriété appearance peut varier considérablement, notamment dans les navigateurs plus anciens. Dans les navigateurs plus récents, les différences restent minimes.

Avertissement

Notez que la propriété appearance n'est pas supportée 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.

Valeur initiale	normal
S'applique à	Tous les éléments.
Héritage	Non.
Animatable	Oui.
Version	CSS3
Syntaxe DOM	object.style.appearance = "none";

Quand utiliser `appearance`

En pratique, on a recours à appearance dans une situation précise : vous souhaitez entièrement restyliser un contrôle de formulaire et l'apparence native du navigateur vous en empêche. En définissant appearance: none, vous supprimez le rendu natif d'un élément tel qu'une case à cocher, un bouton radio, un menu déroulant <select> ou un champ de texte, vous laissant un canevas vierge à styliser avec vos propres bordures, couleurs et pseudo-éléments.

La contrepartie est une responsabilité accrue. Les contrôles natifs fournissent gratuitement des anneaux de focus, un comportement au clavier et des conventions propres à chaque plateforme. Une fois l'apparence native supprimée, vous devez reconstruire les états visuels (focus, coché, désactivé) vous-même, sans quoi le contrôle devient confus et inaccessible. Pour cette raison :

Utilisez appearance: none uniquement lorsque vous avez réellement besoin d'un contrôle personnalisé et que vous êtes prêt à gérer ses états et son accessibilité.
Pour un simple ajustement de couleur (la couleur de la coche ou du remplissage d'une case à cocher, d'un bouton radio ou d'un curseur), préférez la propriété accent-color — elle préserve l'accessibilité native et nécessite beaucoup moins de code.

Syntaxe

Syntaxe de la propriété CSS appearance

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

Seules none et auto sont largement supportées dans les navigateurs modernes. Les valeurs restantes sont largement obsolètes ou non standard.

Exemple : une case à cocher personnalisée

L'exemple ci-dessous supprime le rendu natif de la case à cocher avec appearance: none et la reconstruit sous forme d'une boîte stylisée affichant une coche lorsqu'elle est sélectionnée.

<!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>

Essayez vous-même »

Comment cela fonctionne :

appearance: none (avec les préfixes -webkit- et -moz- pour les navigateurs plus anciens) supprime le rendu par défaut de la case à cocher, nous permettant de la styliser nous-mêmes.
La boîte de la case à cocher reçoit une largeur et une hauteur de 20px, une bordure solide de 2px et un border-radius de 3px pour des coins arrondis. Définir outline à none supprime l'anneau de focus par défaut (dans du vrai code, remplacez-le par votre propre style de focus visible pour l'accessibilité).
Lorsque la case est cochée, le pseudo-élément ::before sur le <label> adjacent insère la coche Unicode (\2714) dans une boîte sombre, en utilisant une couleur de texte blanche pour que la coche ressorte bien sur la background-color.

Note

Pour une simple personnalisation des couleurs 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 préserve les fonctionnalités d'accessibilité natives.

Un usage très courant de appearance: none consiste à supprimer la flèche par défaut et le chrome natif d'un <select> afin d'ajouter votre propre flèche via une image de fond et de contrôler le rembourrage et la bordure.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom select</title>
    <style>
      select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding: 8px 32px 8px 12px;
        border: 1px solid #888;
        border-radius: 6px;
        background-color: #fff;
        /* a small SVG chevron as the dropdown arrow */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M2 4l4 4 4-4" stroke="%23333" fill="none" stroke-width="2"/></svg>');
        background-repeat: no-repeat;
        background-position: right 12px center;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <select>
      <option>Choose a fruit</option>
      <option>Apple</option>
      <option>Banana</option>
      <option>Cherry</option>
    </select>
  </body>
</html>

Sans appearance: none, le navigateur conserve sa flèche déroulante native et vous ne pouvez pas la remplacer de manière fiable. Une fois supprimée, le cursor et la flèche personnalisée sont entièrement sous votre contrôle.

Valeurs

Note

Seules none et auto sont standard et largement supportées. Les valeurs restantes sont largement obsolètes ou non standard dans les navigateurs modernes.

Valeur	Description
none	Supprime tout style spécifique à la plateforme. Note : `normal` est la valeur initiale réelle, pas `none`.
auto	L'agent utilisateur sélectionne le style spécial approprié en fonction de l'élément. Agit comme `none` sur les éléments sans style spécial.
icon	Une petite image représentant un objet, souvent accompagnée d'un nom ou d'une étiquette.
window	Une fenêtre de visualisation, une surface encadrée utilisée pour présenter des objets et du contenu à l'utilisateur.
button	Un petit objet généralement étiqueté avec du texte qui représente un choix 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 prévue 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, contenant 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 également être utilisée pour représenter des dossiers ou des répertoires dans un système de fichiers.
tooltip	Une fenêtre utilisée pour afficher temporairement des informations ou une aide concernant un objet. Également appelée "info" dans les couleurs système CSS2.
dialogue	Une fenêtre utilisée pour présenter une notification ou des alternatives parmi lesquelles l'utilisateur peut choisir dans le cadre d'une action. Également appelée "message-box" dans les polices système CSS2.
push-button	Un bouton entouré d'une bordure, souvent biseautée pour apparaître en trois dimensions, comme s'il était surélevé. Également appelé "caption" dans les polices système CSS2.
hyperlink	Un bouton représentant un lien hypertexte, souvent aussi simple qu'un texte normal souligné et éventuellement coloré différemment.
radio-button	Un bouton qui affiche s'il est coché ou non avec un petit cercle à côté de l'étiquette du bouton. Un disque peut apparaître dans le 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, incluant uniquement la partie "case à cocher" elle-même.
menu-item	Un choix au sein d'un menu, pouvant également 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és de manière linéaire dans une barre horizontale.
outline-tree	Un menu où les options peuvent être affichées ou masquées avec 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, peut-être graphiquement, 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 rendu sous forme de points ou de cases pour masquer la valeur.
initial	Force la propriété à utiliser sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Propriétés associées

outline — restaurer un indicateur de focus visible après suppression du style natif.
border-radius — arrondir les coins de vos contrôles personnalisés.
cursor — signaler l'interactivité sur les contrôles restylisés.
::before et content — injecter des coches et des icônes dans les contrôles personnalisés.
Propriétés CSS3 — vue d'ensemble de l'ensemble de fonctionnalités CSS3 auquel appartient appearance.

Pratique

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 permet d'appliquer un style natif basé sur la plateforme de l'utilisateur.Elle est utilisée pour créer des animations en CSS.

Quand utiliser appearance

Syntaxe

Exemple : une case à cocher personnalisée

Exemple : un menu déroulant select personnalisé

Valeurs

Propriétés associées

Pratique

Quand utiliser `appearance`