La propriété cursor définit la forme du curseur lorsque le pointeur est au-dessus de l'élément.

Syntaxe

/* Valeurs avec un mot-clé */
cursor: pointer;
cursor: auto;

/* Une valeur d'URL avec un mot-clé par défaut */
cursor: url(hand.cur), pointer;

/* Une valeur d'URL avec des coordonnées et un mot-clé par défaut */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* Valeurs globales */
cursor: inherit;
cursor: initial;
cursor: unset;

La propriété cursor peut être définie grâce à zéro ou plusieurs valeurs <uri> séparées par des virgules et suivi par un unique mot-clé obligatoire. Chaque <uri> doit pointer vers un fichier image. Le navigateur essaiera de télécharger la première image indiquée et passera à la suivante s'il ne peut pas. Si aucune image ne fonctionne, il utilisera le mot-clé final.

Chaque <uri> peut éventuellement être suivi par un couple de nombres séparés par un espace qui représente les coordonnées (abscisse puis ordonnée) <x><y> Ces coordonnées permettent de paramétrer le point d'action (hotspot) du curseur par rapport au coin en haut à gauche de l'image.

Par exemple, on peut indiquer deux images grâce à deux valeurs <uri> et fournir des coordonnées <x><y> pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé progress :

cursor: url(one.svg), url(two.svg) 5 5, progress;

Valeurs

<uri>
Une url(…) ou une liste séparées de telles valeurs qui pointent vers un fichier image. On peut utiliser différentes <uri> en cas de recours si certains types d'images ne sont pas pris en charge. Il est obligatoire qu'une valeur non-URL soit présente à la fin de cette liste.
<x> <y>
Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32.
Valeurs utilisant un mot-clé

Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.

Catégorie Valeur CSS Rendu Description
Général auto   Le navigateur détermine le curseur à afficher en fonction du contexte (par exemple, l'effet sera équivalent à text lors du survol du texte).
default default.gif Le curseur par défaut de la plateforme (qui est généralement une flèche).
none   Aucun curseur n'est affiché.
Liens & états context-menu context-menu.png Un menu contextuel est disponible sous le curseur. Seul
IE 10 et les versions supérieures ont implémenté cette valeur sur Windows : bug 258960.
help help.gif Le pointeur indique qu'une aide est disponible.
pointer pointer.gif Le curseur est un pointeur qui indique un lien ; généralement c'est une main.
progress progress.gif Le programme est occupé en arrière-plan mais l'utilisateur peut toujours interagir avec l'interface (à la différence de wait).
wait wait.gif Le programme est occupé, empêchant toute interaction.
Sélection cell cell.gif Le pointeur indique que la  ou les cellules du tableau peuvent être sélectionnées.
crosshair crosshair.gif Un curseur en forme de croix, généralement utilisé pour indiquer une sélection sur une image.
text text.gif Le pointeur indique que le texte peut être sélectionné.
vertical-text vertical-text.gif Le pointeur indique que du texte vertical peut être sélectionné.
Glisser/déposer alias alias.gif Le pointeur indique qu'un alias ou qu'un raccourci sera créé.
copy copy.gif Le pointeur indique que quelque chose devra être copié.
move move.gif L'objet survolé devra être déplacé.
no-drop no-drop.gif Le curseur indique qu'on ne peut pas déposer d'élément à cet endroit.
bug 275173 pour Windows et Mac OS X, « no-drop a le même effet que not-allowed ».
grab grab.gif

Le pointeur indique que le contenu peut être accroché/attrapé ou est accroché/attrapé pour être glissé et déposé quelque part.

grabbing grabbing.gif
not-allowed not-allowed.gif Le curseur indique que quelque chose ne peut pas être fait.
Redimensionnement & défilement all-scroll all-scroll.gif Le curseur indique qu'on peut faire défiler le contenu dans n'importe quelle direction.
bug 275174 pour Windows, « all-scroll a le même effet que move".
col-resize col-resize.gif L'élément ou la colonne peut être redimensionné horizontalement.
row-resize row-resize.gif L'élément ou la ligne peut être redimensionné verticalement.
n-resize Example of a resize towards the top cursor

Un bord peut être déplacé. Par exemple, le curseur se-resize peut être utilisé lorsqu'on redimensionne une boîte à partir de son coin sud-est.

Dans certains environnements, un curseur bidirectionnel équivalent est affiché (ex. n-resize et s-resize sont synonymes de ns-resize).

e-resize Example of a resize towards the right cursor
s-resize Example of a resize towards the bottom cursor
w-resize Example of a resize towards the left cursor
ne-resize Example of a resize towards the top-right corner cursor
nw-resize Example of a resize towards the top-left corner cursor
se-resize Example of a resize towards the bottom-right corner cursor
sw-resize Example of a resize towards the bottom-left corner cursor
ew-resize 3-resize.gif Le pointeur indique un redimensionnement bidirectionnel.
ns-resize 6-resize.gif
nesw-resize 1-resize.gif
nwse-resize 4-resize.gif
Zoom zoom-in zoom-in.gif

Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu.

zoom-out zoom-out.gif

Syntaxe formelle

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

Exemples

CSS

.toto {
  cursor: crosshair;
}

/* On utilise la valeur préfixée   */
/* si "zoom-in" n'est pas prise en */
/* charge */
.truc {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
} 

HTML

<p class="toto">
  On dirait qu'on pourrait sélectionner une zone.
</p>

<p class="truc">
  Et là on peut zoomer.
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Basic User Interface Module Level 3
La définition de 'cursor' dans cette spécification.
Recommendation Ajout de plusieurs mots-clés et de la syntaxe de positionnement pour url().
CSS Level 2 (Revision 1)
La définition de 'cursor' dans cette spécification.
Recommendation Définition initiale.

Valeur initialeauto
Applicabilitétous les éléments
Héritéeoui
Médiapour chaque propriété individuelle de la propriété raccourcie :
  • visual: Valeur introuvable dans la base de données
  • interactive: Valeur introuvable dans la base de données
Valeur calculéecomme spécifié mais avec les valeurs url rendues absolues
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4
Notes
Support complet 4
Notes
Notes In Internet Explorer 11, when cursor is applied to an element and this element is underneath an open <select> menu and the user hovers over a <select> menu item that's on top of said element, the cursor for said element will be displayed rather than the <select>'s normal cursor. See bug 817822.
Opera Support complet 7Safari Support complet 1.2WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
autoChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7Safari Support complet 1.2WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
defaultChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7Safari Support complet 1.2WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
inheritChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 8Opera Support complet 9Safari Support complet 1.2WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
noneChrome Support complet 5Edge Support complet 12Firefox Support complet 3IE Support complet 9Opera Support complet 15Safari Support complet 5WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
context-menuChrome Support complet 1
Notes
Support complet 1
Notes
Notes This cursor is only supported on macOS and Linux.
Edge Support complet 12Firefox Support complet 1.5
Notes
Support complet 1.5
Notes
Notes This cursor is only supported on macOS and Linux.
IE Support complet 10Opera Support complet 10.6Safari Support complet 3WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
helpChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7Safari Support complet 1.2WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
pointerChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 6Opera Support complet 7Safari Support complet 1.2WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
progressChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 6Opera Support complet 7Safari Support complet 1.2WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
waitChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7Safari Support complet 1.2WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
cellChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Support complet 10Opera Support complet 10.6Safari Support complet 3WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
crosshairChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7Safari Support complet 1.2WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
textChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7Safari Support complet 1.2WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
vertical-textChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Aucun support NonOpera Support complet 10.6Safari Support complet 3WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
aliasChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Support complet 10Opera Support complet 10.6Safari Support complet 3WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
copyChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Support complet 10Opera Support complet 10.6Safari Support complet 3WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
moveChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7Safari Support complet 1.2WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
no-dropChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Support complet 6Opera Support complet 10.6Safari Support complet 3WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
not-allowedChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Support complet 6Opera Support complet 10.6Safari Support complet 3WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
all-scrollChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Support complet 6Opera Support complet 10.6Safari Support complet 3WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
col-resizeChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Support complet 6Opera Support complet 10.6Safari Support complet 3WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
row-resizeChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Support complet 6Opera Support complet 10.6Safari Support complet 3WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Unidirectional resize cursors (n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, and sw-resize)Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7Safari Support complet 1.2WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Bidirectional resize cursors (ew-resize, nesw-resize, ns-resize, and nwse-resize)Chrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Support complet 10Opera Support complet 10.6Safari Support complet 3WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Zoom cursors (zoom-in and zoom-out)Chrome Support complet 37
Support complet 37
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12Firefox Support complet 24
Support complet 24
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Support complet 24
Support complet 24
Aucun support 15 — 23
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 9
Support complet 9
Support complet 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Grab cursors (grab and grabbing)Chrome Support complet 68
Notes
Support complet 68
Notes
Notes Chrome also continues to support the prefixed versions.
Support complet 1
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Chrome 22 added Windows support.
Edge Support complet 14Firefox Support complet 27
Support complet 27
Support complet 1.5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Support complet OuiSafari Support complet 11
Support complet 11
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
url()Chrome Support complet 1Edge Support complet 12Firefox Support complet 1.5
Notes
Support complet 1.5
Notes
Notes Firefox 4 added macOS support.
IE Support complet 6Opera ? Safari Support complet 3WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
url() positioning syntax
Expérimentale
Chrome Support complet OuiEdge Aucun support NonFirefox Support complet OuiIE Aucun support NonOpera ? Safari Support complet OuiWebView Android Aucun support NonChrome Android ? Edge Mobile Aucun support NonFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,