Propriété CSS cursor

La propriété cursor contrôle la forme du pointeur de la souris lorsqu'il survole un élément. C'est un repère visuel : la forme du pointeur indique à l'utilisateur ce qui se passera s'il clique, fait glisser ou survole — une main signifie « c'est cliquable », un curseur texte signifie « vous pouvez sélectionner du texte ici », une roue tournante signifie « attendez ».

Cette page explique quand utiliser cursor, la liste complète des valeurs de mots-clés regroupées par usage, comment charger votre propre image comme curseur personnalisé (avec la syntaxe <url> et ses solutions de repli), ainsi que les écueils d'accessibilité à éviter.

Pourquoi et quand l'utiliser

Les navigateurs choisissent déjà un curseur approprié pour chaque élément — un curseur texte sur un paragraphe, une main pointante sur un lien. Vous remplacez principalement la valeur par défaut lorsque :

Vous créez un contrôle interactif personnalisé (une <div> jouant le rôle d'un bouton, une carte déplaçable, une poignée de tri) pour lequel le navigateur n'a aucun moyen de deviner le curseur approprié. Un curseur pointer ou grab rétablit alors le repère attendu par les utilisateurs.
Vous souhaitez indiquer un état — un contrôle désactivé avec not-allowed, ou une zone occupée avec wait/progress.
Vous avez besoin d'un pointeur personnalisé ou de style jeu via une image personnalisée.

Utilisez-le avec parcimonie et de façon prévisible. Un curseur qui contredit le comportement (une main pointer sur du texte non cliquable, ou none cachant le curseur sur une page normale) perturbe les utilisateurs plus qu'il ne les aide.

Aperçu de la syntaxe

La valeur est constituée de zéro ou plusieurs valeurs <url> séparées par des virgules, chacune pointant vers un fichier image, suivies d'un mot-clé de repli obligatoire. Le navigateur essaie chaque image dans l'ordre et passe à la suivante si une image ne peut pas être chargée ; si aucune ne se charge, il utilise le mot-clé. C'est pourquoi le mot-clé à la fin est requis — il garantit que l'utilisateur obtient toujours un curseur.

/* keyword only */
cursor: pointer;

/* custom image with a keyword fallback (the fallback is required) */
cursor: url("cursor.png"), auto;

/* multiple images tried in order, then the fallback */
cursor: url("cursor.svg"), url("cursor.png"), auto;

Info

Les navigateurs modernes supportent grab, grabbing, zoom-in et zoom-out sans préfixes vendeurs. Pour que les clics atterrissent là où les utilisateurs le prévoient, associez les changements de curseur personnalisé aux propriétés pointer-events et user-select.

Valeur initiale	auto
S'applique à	Tous les éléments.
Hérité	Oui.
Animable	Non.
Version	CSS2
Syntaxe DOM	object.style.cursor = "cell";

Toutes les valeurs de mots-clés

Chaque mot-clé accepté par la propriété, en un seul endroit. Les plus courants dans le travail d'interface quotidien sont pointer (cliquable), default (la flèche simple), text, move, grab/grabbing et not-allowed.

cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | <url> | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbing

Exemple avec les valeurs auto et help

Exemple de la propriété CSS cursor avec les valeurs auto et help

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .auto {
        cursor: auto;
      }
      .help {
        cursor: help;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>

Essayez vous-même »

L'exemple suivant affiche une boîte étiquetée pour chaque valeur de mot-clé, afin que vous puissiez survoler chacune et voir son curseur dans votre navigateur.

Exemple montrant toutes les valeurs de cursor

Exemple de la propriété CSS cursor avec toutes les valeurs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
      .auto {
        cursor: auto;
      }
      .default {
        cursor: default;
      }
      .none {
        cursor: none;
      }
      .context-menu {
        cursor: context-menu;
      }
      .help {
        cursor: help;
      }
      .pointer {
        cursor: pointer;
      }
      .progress {
        cursor: progress;
      }
      .wait {
        cursor: wait;
      }
      .cell {
        cursor: cell;
      }
      .crosshair {
        cursor: crosshair;
      }
      .text {
        cursor: text;
      }
      .vertical-text {
        cursor: vertical-text;
      }
      .alias {
        cursor: alias;
      }
      .copy {
        cursor: copy;
      }
      .move {
        cursor: move;
      }
      .no-drop {
        cursor: no-drop;
      }
      .not-allowed {
        cursor: not-allowed;
      }
      .all-scroll {
        cursor: all-scroll;
      }
      .col-resize {
        cursor: col-resize;
      }
      .row-resize {
        cursor: row-resize;
      }
      .n-resize {
        cursor: n-resize;
      }
      .e-resize {
        cursor: e-resize;
      }
      .s-resize {
        cursor: s-resize;
      }
      .w-resize {
        cursor: w-resize;
      }
      .ns-resize {
        cursor: ns-resize;
      }
      .ew-resize {
        cursor: ew-resize;
      }
      .ne-resize {
        cursor: ne-resize;
      }
      .nw-resize {
        cursor: nw-resize;
      }
      .se-resize {
        cursor: se-resize;
      }
      .sw-resize {
        cursor: sw-resize;
      }
      .nesw-resize {
        cursor: nesw-resize;
      }
      .nwse-resize {
        cursor: nwse-resize;
      }
      .grab {
        cursor: grab;
      }
      .grabbing {
        cursor: grabbing;
      }
      .zoom-in {
        cursor: zoom-in;
      }
      .zoom-out {
        cursor: zoom-out;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="default">default</div>
      <div class="none">none</div>
      <div class="context-menu">context-menu</div>
      <div class="help">help</div>
      <div class="pointer">pointer</div>
      <div class="progress">progress</div>
      <div class="wait">wait</div>
      <div class="cell">cell</div>
      <div class="crosshair">crosshair</div>
      <div class="text">text</div>
      <div class="vertical-text">vertical-text</div>
      <div class="alias">alias</div>
      <div class="copy">copy</div>
      <div class="move">move</div>
      <div class="no-drop">no-drop</div>
      <div class="not-allowed">not-allowed</div>
      <div class="all-scroll">all-scroll</div>
      <div class="col-resize">col-resize</div>
      <div class="row-resize">row-resize</div>
      <div class="n-resize">n-resize</div>
      <div class="s-resize">s-resize</div>
      <div class="e-resize">e-resize</div>
      <div class="w-resize">w-resize</div>
      <div class="ns-resize">ns-resize</div>
      <div class="ew-resize">ew-resize</div>
      <div class="ne-resize">ne-resize</div>
      <div class="nw-resize">nw-resize</div>
      <div class="se-resize">se-resize</div>
      <div class="sw-resize">sw-resize</div>
      <div class="nesw-resize">nesw-resize</div>
      <div class="nwse-resize">nwse-resize</div>
      <div class="grab">grab</div>
      <div class="grabbing">grabbing</div>
      <div class="zoom-in">zoom-in</div>
      <div class="zoom-out">zoom-out</div>
    </div>
  </body>
</html>

Essayez vous-même »

Curseur personnalisé avec la valeur "url"

Vous pouvez fournir votre propre image comme curseur. Quelques règles garantissent la fiabilité :

Terminez toujours par un mot-clé de repli (, auto ci-dessous). Sans lui, la déclaration est invalide et complètement ignorée.
Gardez les images petites. Les navigateurs limitent les curseurs personnalisés à environ 32×32 px (128×128 px dans certains cas) ; les images plus grandes sont silencieusement ignorées et le repli est utilisé.
Définissez le point chaud — le point de clic actif — avec deux nombres optionnels après l'URL : cursor: url("crosshair.png") 16 16, auto; place le centre d'une image 32×32 comme point de clic. Sans ces nombres, le coin supérieur gauche est utilisé.
Utilisez un format pris en charge par tous les navigateurs cibles (PNG et SVG sont sûrs ; .cur/.ani sont réservés à Windows).

Exemple de la propriété cursor avec l'URL

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .cursor {
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: url("/uploads/media/default/0001/04/6388ec92938ec31c9f019a249174f683118b55d6.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <i class="cursor">Icon</i>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description	Essayer
auto	Le navigateur définit le curseur. C'est la valeur par défaut de cette propriété.	Essayer »
default	C'est le curseur par défaut.	Essayer »
none	Aucun curseur n'est rendu pour l'élément.	Essayer »
context-menu	Le curseur indique qu'un menu contextuel est disponible.	Essayer »
help	Le curseur indique qu'une aide est disponible.	Essayer »
pointer	Le curseur indique un lien sous forme de pointeur.	Essayer »
progress	Le curseur indique que le programme est occupé ou en cours d'exécution.	Essayer »
wait	Le curseur indique que le programme est occupé.	Essayer »
cell	Le curseur indique qu'une cellule ou un ensemble de cellules peut être sélectionné.	Essayer »
crosshair	Le curseur sera rendu sous forme de réticule.	Essayer »
text	Le curseur indique du texte pouvant être sélectionné.	Essayer »
`<url>`	Une liste d'URL séparées par des virgules pour des curseurs personnalisés.	Essayer »
vertical-text	Le curseur indique du texte vertical pouvant être sélectionné.	Essayer »
alias	Le curseur indique qu'un alias de quelque chose va être créé.	Essayer »
copy	Le curseur indique quelque chose qui peut être copié.	Essayer »
move	Le curseur indique que quelque chose peut être déplacé.	Essayer »
no-drop	Le curseur indique que l'élément glissé ne peut pas être déposé ici.	Essayer »
not-allowed	Le curseur indique que l'action demandée ne sera pas exécutée.	Essayer »
all-scroll	Le curseur indique que quelque chose peut être défilé dans n'importe quelle direction.	Essayer »
col-resize	Le curseur indique que la colonne peut être redimensionnée horizontalement.	Essayer »
row-resize	Le curseur indique que la ligne peut être redimensionnée verticalement.	Essayer »
n-resize	Le curseur indique qu'un bord d'une boîte doit être déplacé vers le haut.	Essayer »
s-resize	Le curseur indique qu'un bord d'une boîte doit être déplacé vers le bas.	Essayer »
e-resize	Le curseur indique qu'un bord d'une boîte doit être déplacé vers la droite.	Essayer »
w-resize	Le curseur indique qu'un bord d'une boîte doit être déplacé vers la gauche.	Essayer »
ns-resize	Le curseur indique un curseur de redimensionnement bidirectionnel.	Essayer »
ew-resize	Le curseur indique un curseur de redimensionnement bidirectionnel.	Essayer »
ne-resize	Le curseur indique qu'un bord d'une boîte doit être déplacé vers le haut et la droite.	Essayer »
nw-resize	Le curseur indique qu'un bord d'une boîte doit être déplacé vers le haut et la gauche.	Essayer »
se-resize	Le curseur indique qu'un bord d'une boîte doit être déplacé vers le bas et la droite.	Essayer »
sw-resize	Le curseur indique qu'un bord d'une boîte doit être déplacé vers le bas et la gauche.	Essayer »
nesw-resize	Le curseur indique un curseur de redimensionnement bidirectionnel.	Essayer »
nwse-resize	Le curseur indique un curseur de redimensionnement bidirectionnel.	Essayer »
zoom-in	Le curseur indique que quelque chose peut être agrandi.	Essayer »
zoom-out	Le curseur indique que quelque chose peut être réduit.	Essayer »
grab	Le curseur indique que quelque chose peut être saisi.	Essayer »
grabbing	Le curseur indique qu'un élément est en cours de déplacement.	Essayer »
initial	La propriété utilise sa valeur par défaut.	Essayer »
inherit	La propriété est héritée de l'élément parent.

Accessibilité et pièges courants

cursor est un indice, pas un contrôle. Il change l'apparence du pointeur, jamais ce que fait l'élément. Un curseur pointer ne rend pas une <div> cliquable, et not-allowed ne désactive pas un bouton — vous avez toujours besoin d'un comportement réel (un onclick, l'attribut disabled, des rôles ARIA).
Ne vous fiez pas uniquement au curseur pour signaler des états désactivés ou occupés. Les utilisateurs au clavier et tactiles ne le voient jamais. Combinez-le avec un style visible et les attributs appropriés.
Évitez cursor: none sur des pages ordinaires. Cacher le pointeur peut piéger les utilisateurs qui ne peuvent plus le retrouver. Réservez-le aux expériences plein écran (jeux, bornes interactives) qui gèrent leur propre pointeur.
Les images personnalisées peuvent nuire à l'utilisabilité si elles sont peu contrastées, trop grandes ou ont un point chaud mal placé, ce qui amène les utilisateurs à cliquer légèrement à côté. Testez sur des fonds clairs et sombres.
cursor est hérité, donc une valeur définie sur un conteneur s'applique à ses enfants à moins qu'ils ne la remplacent.

Propriétés associées

pointer-events — détermine si un élément réagit au pointeur.
user-select — contrôle si le texte peut être sélectionné (fonctionne bien avec cursor: text / cursor: default).
:hover — modifie les styles lorsque le pointeur survole un élément.
caret-color — style le caret de saisie de texte clignotant, un « curseur » entièrement différent.

Exercice

Pratique

Que spécifie la propriété CSS 'cursor' dans la conception web ?

Elle spécifie le type de curseur à afficher lors du survol d'un élément.Elle spécifie la couleur du curseur lors du survol d'un élément.Elle spécifie la taille du curseur lors du survol d'un élément.Elle influe sur le comportement du curseur lors de l'interaction avec du texte ou des éléments graphiques.