cursor

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;

/* 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		Le curseur par défaut (qui est généralement une flèche).
	none		Aucun curseur n'est affiché.
Liens & états	context-menu		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		Le pointeur indique qu'une aide est disponible.
	pointer		Le pointeur généralement utilisé au-dessus des liens, généralement c'est une main.
	progress		Le programme est occupé en arrière-plan mais l'utilisateur peut toujours interagir avec l'interface (à la différence de wait).
	wait		Le programme est occupé, empêchant toute interaction.
Sélection	cell		Le pointeur indique que les cellules peuvent être sélectionnées.
	crosshair		Un curseur en forme de croix, généralement utilisé pour indiquer une sélection sur une image.
	text		Le pointeur indique que le texte peut être sélectionné.
	vertical-text		Le pointeur indique que du texte vertical peut être sélectionné.
Glisser/déposer	alias		Le pointeur indique qu'un alias ou qu'un raccourci sera créé.
	copy		Le pointeur indique que quelque chose peut être copié.
	move		L'objet survolé peut être déplacé.
	no-drop		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		Le curseur indique que quelque chose ne peut pas être fait.
Redimensionnement & défilement	all-scroll		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		L'élément ou la colonne peut être redimensionné horizontalement.
	row-resize		L'élément ou la ligne peut être redimensionné verticalement.
	n-resize		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
	s-resize
	w-resize
	ne-resize
	nw-resize
	se-resize
	sw-resize
	ew-resize		Le pointeur indique un redimensionnement bidirectionnel.
	ns-resize
	nesw-resize
	nwse-resize
Zoom	zoom-in		Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu.
	zoom-out
Attrapage	grab		Le pointeur indique que le contenu peut être accroché/attrapé pour être glisé et déposé quelque part.
	grabbing

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

Compatibilité des navigateurs

[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.

[5] Edge 14.1. prend en charge la valeur vertical-text.

Voir aussi

• pointer-events
• Propriété cursor (MSDN)