cursor

La propriété CSS cursor définit la forme du curseur (s'il y en a un) lorsque le pointeur est au-dessus de l'élément.

Le paramètre du curseur doit informer les utilisateurs des opérations pouvant être effectuées avec la souris à l'emplacement actuel, notamment : sélection de texte, activation des menus d'aide ou contextuels, copie de contenu, redimensionnement des tableaux, etc. Vous pouvez spécifier le type de curseur à l'aide d'un mot-clé ou charger une icône spécifique à utiliser (avec des images de replis facultatives et un mot-clé obligatoire comme solution de repli finale).

Exemple interactif

cursor: help;

cursor: wait;

cursor: crosshair;

cursor: not-allowed;

cursor: zoom-in;

cursor: grab;

<section class="default-example container" id="default-example">
 <div id="example-element">
 Passez sur cet élément pour voir le style du curseur.
 </div>
</section>

#example-element {
 display: flex;
 background-color: #1766aa;
 color: white;
 height: 180px;
 width: 360px;
 justify-content: center;
 align-items: center;
 font-size: 14pt;
 padding: 5px;
}

Syntaxe

/* Valeurs avec un mot-clé */
cursor: pointer;
cursor: auto;
/* ... */
cursor: zoom-out;
/* 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;
/* Liens et liens de repli (certaines avec des coordonnées), avec un mot-clé
obligatoire de repli */
cursor:
 url("cursor_1.svg") 4 5,
 url("cursor_2.svg"),
 /* ..., */ url("cursor_n.cur") 5 5,
 progress;
/* Valeurs globales */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

La propriété cursor peut être définie grâce à zéro ou plusieurs valeurs <url> séparées par des virgules et suivi par un unique mot-clé obligatoire. Chaque <url> 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 <url> doit pointer vers un fichier image. Le navigateur essaiera de charger la première image spécifiée, en passant à la suivante si elle ne peut pas être chargée, et en revenant à la valeur du mot-clé si aucune image n'a pu être chargée (ou si aucune n'a été spécifiée).

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

Valeurs

<url> Facultatif

Une url(...) ou une liste d'URL séparées par des virgules url(...), url(...), ... pointant vers un fichier image. On peut utiliser plusieurs <url>, au cas où 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> Facultatif

Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32.

Valeurs utilisant un mot-clé (keyword)

Une valeur de mot-clé doit être spécifiée, indiquant soit le type de curseur à utiliser, soit le curseur de secours à utiliser si toutes les icônes spécifiées ne parviennent pas à se charger.

Les mots-clés disponibles sont répertoriés dans le tableau ci-dessous. À l'exception de none, qui signifie « aucun curseur », une image montre comment les curseurs étaient auparavant rendus. Vous pouvez passer votre souris sur les lignes du tableau pour voir l'effet des différentes valeurs de mots-clés de curseur sur votre navigateur actuel.

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	flèche large pointant vers le haut et vers la gauche	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	grande flèche pointant vers le haut et vers la gauche légèrement obscurcissant une icône de menu	Un menu contextuel est disponible sous le curseur.
	help	grande flèche pointant vers le haut et versla gauche à côté d'un point d'interrogation	Le pointeur indique qu'une aide est disponible.
	pointer	main droite avec un index pointant vers le haut	Le curseur est un pointeur qui indique un lien. Généralement c'est une main.
	progress	large flèche et sablier	Le programme est occupé en arrière-plan mais l'utilisateur peut toujours interagir avec l'interface (à la différence de wait).
	wait	sablier	Le programme est occupé, empêchant toute interaction (à la différence de progress). Parfois, une image d'un sablier ou d'une montre.
Sélection	cell	large symbole en forme de plus	Le pointeur indique que la ou les cellules du tableau peuvent être sélectionnées.
	crosshair	symbole en forme de croix composé de deux lignes fines	Un curseur en forme de croix, généralement utilisé pour indiquer une sélection sur une image.
	text	i majuscule vertical	Le pointeur indique que le texte peut être sélectionné.
	vertical-text	i majuscule horizontal	Le pointeur indique que du texte vertical peut être sélectionné.
Glisser/déposer	alias	large flèche pointant vers le haut et vers la gauche obscurcissant partiellement une petite icône de dossier avec une flèche courbée pointant vers le haut et vers la droite	Le pointeur indique qu'un alias ou qu'un raccourci sera créé.
	copy	large flèche pointant vers le haut et vers la gauche obscurcissant partiellement une petite icône de dossier avec un signe plus	Le pointeur indique que quelque chose devra être copié.
	move	symbole plus composé de deux lignes fines. Les quatre points sont de petites flèches pointant vers l'extérieur	L'objet survolé devra être déplacé.
	no-drop	icône de curseur et icône d'interdiction	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	icône d'interdiction, qui est un cercle avec une ligne à travers	Le curseur indique que quelque chose ne peut pas être fait.
	grab	icône de main ouverte	Le pointeur indique que le contenu peut être accroché/attrapé ou est accroché/attrapé pour être glissé et déposé quelque part.
	grabbing	icône de main fermée, de l'arrière de la main
Redimensionnement & défilement	all-scroll	icône d'un point de taille moyenne avec quatre triangles autour	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	deux lignes verticales parallèles étroites avec une petite flèche pointant vers la gauche et une autre pointant vers la droite	L'élément ou la colonne peut être redimensionné horizontalement.
	row-resize	deux lignes horizontales parallèles étroites avec une petite flèche pointant vers le haut et une autre pointant vers le bas	L'élément ou la ligne peut être redimensionné verticalement.
	n-resize	Exemple de redimensionnement vers le haut	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 d'un curseur de redimensionnement vers la droite
	s-resize	Exemple d'un curseur de redimensionnement vers le bas
	w-resize	Exemple d'un curseur de redimensionnement vers la gauche
	ne-resize	Exemple d'un curseur de redimensionnement vers le coin supérieur droit
	nw-resize	Exemple d'un curseur de redimensionnement vers le coin supérieur gauche
	se-resize	Exemple d'un curseur de redimensionnement vers le coin inférieur droit
	sw-resize	Exemple d'un curseur de redimensionnement vers le coin inférieur gauche
	ew-resize	longue flèche fine pointant vers la gauche et la droite	Le pointeur indique un redimensionnement bidirectionnel.
	ns-resize	longue flèche fine pointant vers le haut et le bas
	nesw-resize	longue flèche fine pointant vers le coin supérieur droit et le coin inférieur gauche
	nwse-resize	longue flèche fine pointant vers le coin supérieur gauche et le coin inférieur droit
Zoom	zoom-in	loupe avec un signe plus	Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu.
	zoom-out	loupe avec un signe moins

Définition formelle

Syntaxe formelle

cursor = 
 <cursor-image># ? <cursor-predefined> 

<cursor-image> = 
 [ <url> | <url-set> ] [ <number> {2} ] ? 

<cursor-predefined> = 
 auto | 
 default | 
 none | 
 context-menu | 
 help | 
 pointer | 
 progress | 
 wait | 
 cell | 
 crosshair | 
 text | 
 vertical-text | 
 alias | 
 copy | 
 move | 
 no-drop | 
 not-allowed | 
 grab | 
 grabbing | 
 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 

Notes d'utilisation

Limites de taille des icônes

La spécification ne limite pas la taille de l'image cursor, les agents utilisateurs les restreignent généralement pour éviter un usage abusif. Par exemple, sur Firefox et Chromium, les images de curseur sont limitées à 128x128 pixels par défaut, mais il est recommandé de limiter la taille de l'image du curseur à 32x32 pixels. Les changements de curseur qui utilisent des images plus grandes que la taille maximale prise en charge par l'agent utilisateur seront généralement ignorés.

Formats de fichiers image pris en charge

Les agents utilisateurs sont tenus par la spécification de prendre en charge les fichiers PNG, les fichiers SVG v1.1 en mode statique sécurisé contenant une taille naturelle, et tout autre format de fichier image non animé qu'ils prennent en charge pour les images dans d'autres propriétés. Les navigateurs de bureau prennent également largement en charge le format de fichier .cur.

La spécification indique en outre que les agents utilisateurs devraient également prendre en charge les fichiers SVG v1.1 en mode animé sécurisé contenant une taille naturelle, ainsi que tout autre format de fichier image animé qu'ils prennent en charge pour les images dans d'autres propriétés. Les agents utilisateurs peuvent prendre en charge à la fois des images SVG statiques et animées qui ne contiennent pas de taille naturelle.

iPadOS

iPadOS prend en charge les dispositifs de pointage tels que les trackpads et les souris. Par défaut, le curseur de l'iPad est affiché sous la forme d'un cercle, et la seule valeur prise en charge qui modifiera l'apparence du pointeur est text.

Autres notes

Les changements de curseur qui intersectent les zones de la barre d'outils sont souvent bloqués pour éviter le spoofing.

Exemples

Paramétrage des types de curseur

.toto {
 cursor: crosshair;
}
.tata {
 cursor: zoom-in;
}
/* Une valeur de mot-clé de repli est requise lors de l'utilisation d'une URL */
.titi {
 cursor: url("hyper.cur"), auto;
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• pointer-events
• Le type de donnée <url>
• L'attribut SVG cursor