Changer l'aspect du curseur en CSS

La propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web.
Le client affichera automatiquement le curseur de son ordinateur qui correspond au type de curseur que vous aurez choisi.

Exemples

Exemple d'un style en forme de croix donné au curseur sur le "body" de votre page

body{
  cursor:crosshair;
}

On peut bien sûr donner des styles différents à plusieurs éléments de la même page.
Exemple d'un style en forme de croix sur le "body" agrémenté d'un style en forme de sablier sur les images et de la main sur les liens.

body{
  cursor: crosshair;
}
img{
  cursor: wait;
}
a:link{
  cursor:  pointer;
}

Pour finir, on peut même attribuer un curseur personnel à une page.
Il suffit de mettre dans le code CSS à la balise voulue en partant du principe que votre curseur est dans le dossier courant:

cursor: url('votre_curseur_perso.cur'), pointer; 

Il existe beaucoup de logiciels capables de créer des curseurs personnels, le mieux étant de partir des curseurs d'origine et de les modifier, en prenant soin de sauvegarder avant toute manipulation (sous Windows, ils se trouvent dans C:windowscursors).
Exemple de logiciel: Znsoft IconMaker
La taille des curseurs ne doit pas excéder 32x32 px.

Liste des attributs possibles de cette propriété

Voir également :
http://zonecss.free.fr/code_javascript_css/code_javascript_css_cursor.html

Acceptés par tous les navigateurs

• auto : Aspect identique à celui du curseur par défaut sur la balise qui possède l'attribut, ne change rien.
• default : Curseur par défaut du navigateur.
• pointer : Curseur en forme de main avec le doigt déplié.
• text : Curseur d'édition de texte.
• help : Curseur d'aide.
• wait : Curseur d'attente
• progress : Curseur de progression.
• move : Curseur de déplacement.
• crosshair : Curseur en forme de croix.

Curseurs de redimensionnement

• n-resize : Curseur de redimensionnement bas vers haut.
• s-resize : Curseur de redimensionnement haut vers bas.
• e-resize : Curseur de redimensionnement gauche vers droite.
• w-resize : Curseur de redimensionnement droite vers gauche.
• ne-resize : Curseur de redimensionnement bas-gauche vers haut-droite.
• nw-resize : Curseur de redimensionnement bas-droite vers haut-gauche.
• se-resize : Curseur de redimensionnement haut-gauche vers bas-droite.
• sw-resize : Curseur de redimensionnement haut-droite vers bas-gauche.

Note : En fait, il est très simple de se rappeler toutes ces propriétés d'un coup.
n, s, e, w correspondent à nord, sud, est, ouest, c'est-à-dire haut, bas, droite, gauche.
Il suffit d'indiquer la direction vers laquelle doit pointer le curseur, suivi bien sûr de "-resize".

Non accepté par tous les navigateurs

Firefox et Opera, entre autres, ignorent ces directives.

• inherit : Même curseur que la balise parente.
• not-allowed : Curseur en forme de rond barré.
• no-drop : Curseur en forme de main avec le doigt déplié et un rond barré.
• col-resize : Curseur fait de deux traits verticaux avec une flèche de chaque coté.
• row-resize : Curseur fait de deux traits horizontaux avec une flèche de chaque côté.

Ce document intitulé « Changer l'aspect du curseur en CSS » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.