Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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

Valeur initialeauto
Applicabilitétous les éléments
Héritéeoui
Médiavisuel, interactif
Valeur calculéecomme spécifié mais avec une URI relative convertie en une URI absolue
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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

/* Valeurs utilisant une URL et des coordonnées */
cursor:  url(cursor1.png) 4 12, auto;
cursor:  url(cursor2.png) 2 2, pointer;

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

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 (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 pointeur généralement utilisé au-dessus des liens, 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 les cellules 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 peut être copié.
move move.gif L'objet survolé peut ê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 ».
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.
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
Attrapage grab grab.gif

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

grabbing grabbing.gif

Syntaxe formelle

[ [ <uri> [<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.
Candidat au statut de recommandation 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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
auto, crosshair, default, move, text, wait, help,
n-resize, e-resize, s-resize, w-resize,
ne-resize, nw-resize, se-resize, sw-resize
1.0 1.0 4.0[1] 7.0 1.2
pointer, progress 1.0 1.0 6.0 7.0 1.2
url() 1.0 1.5
4.0[2]
6.0 ? 3.0
Syntaxe de positionnement pour les valeurs url() (Oui) (Oui) Pas de support ? (Oui)
not-allowed, no-drop, vertical-text, all-scroll,
col-resize, row-resize
1.0 1.5 6.0 10.6 3.0
alias, cell, copy,
ew-resize, ns-resize, nesw-resize, nwse-resize
1.0 1.5 10.0 10.6 3.0
context-menu 1.0[3] 1.5[3] 10.0 10.6 3.0
none 5.0 3.0 9.0 15.0 5.0
inherit 1.0 1.0 8.0 9.0 1.2
zoom-in, zoom-out

1.0 -webkit-
37

1.0 -moz-
24.0
Pas de support 11.6
15-23 -webkit-
24
3.0 -webkit-
9
grab, grabbing 1.0 -webkit-
22.0 -webkit-[4]
1.5 -moz-
27.0
Pas de support (Oui) 4.0 -webkit-
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
auto, crosshair, default, move, text, wait, help,
n-resize, e-resize, s-resize, w-resize,
ne-resize, nw-resize, se-resize, sw-resize
Pas de support ? ? ? ?
pointer, progress Pas de support ? ? ? ?
url() Pas de support ? ? ? ?
Syntaxe de positionnement pour les valeurs url() Pas de support ? ? ? ?
not-allowed, no-drop, vertical-text, all-scroll,
col-resize, row-resize
Pas de support ? ? ? ?
alias, cell, copy,
ew-resize, ns-resize, nesw-resize, nwse-resize
Pas de support ? ? ? ?
context-menu Pas de support ? ? ? ?
none Pas de support ? ? ? ?
inherit Pas de support ? ? ? ?
zoom-in, zoom-out Pas de support ? ? ? ?
grab, grabbing Pas de support ? ? ? ?

[1] Pour IE11, lorsque cursor est appliqué à un élément situé sous un menu <select> et que l'utilisateur survole le menu <select>, c'est le curseur de l'élément dessous qui sera affiché plutôt que le curseur normal pour <select>. Voir le bug IE 963961.

[2] La prise en charge a été ajoutée pour Mac OS X.

[3] Seulement pris en charge pour Mac OS X et Linux.

[4] La prise en charge a été ajoutée pour Windows.

Voir aussi

Étiquettes et contributeurs liés au document

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