Cursor - Propriété CSS

Schéma syntaxique de cursor.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• url est le chemin d'accès à un fichier image. Plusieurs url peuvent être spécifiées en les séparant par des virgules.
• x et y sont les coordonnées du point chaud dans l'image du curseur.
• default est un curseur par défaut pour le cas où l'url ne serait pas trouvée ou invalide.

Description de la propriété cursor.

Définit la forme du curseur de la souris lorsque celle-ci survole l'élément. Plusieurs valeurs peuvent être précisées en les séparant par des virgules : le navigateur utilise la première valeur qu'il reconnaît.

Une subtilité : si l'élément a des coins arrondis, le curseur de l'élément ne doit s'appliquer que à l'intérieur des arrondis. Néanmoins, si le contenu de l'élément déborde à l'extérieur des arrondis, le curseur conserve sa forme sur le contenu qui déborde.

Ce bloc a des coins arrondis et un curseur en forme de main. Si la souris de déplace sur l'extérieur de l'arrondi ET du contenu, le curseur doit reprendre sa forme normale.

Remarque : le curseur ne peut pas être défini sur les parties de l'écran qui ne font pas strictement partie du document : les barres de défilement, la barre d'adresse, etc. Sur ces emplacements le navigateur est libre de définir ses propres curseurs.

Valeurs pour cursor (résumé).

Accès rapide aux différents catégories de curseurs.

• Curseurs d'usage général.
• Curseurs indiquant un état du système ou de l'élément.
• Curseurs indiquant la possibilité de sélection.
• Curseurs indiquant la possibilité d'un déplacement ou d'une copie.
• Curseurs indiquant la possibilité d'un dimensionnement.
• Curseurs indiquant la possibilité de zoomer.
• Curseurs personnalisés (fichier graphique).

Curseurs d'usage général.

• cursor: auto; cursor: default; cursor: none;
  auto

  Valeur par défaut. Le curseur est défini par le navigateur en fonction de l'endroit où se trouve la souris.

  default

  Curseur du système d'exploitation. En général une flèche inclinée.

  none

  Aucun curseur n'est affiché lorsque la souris survole l'élément.
  auto

  default

  none

Curseurs indiquant un état du système ou de l'élément.

• cursor: wait; cursor: progress; cursor: pointer; cursor: help; cursor: context-menu;
  wait

  Curseur indiquant qu'un traitement est en cours (roue tournante, sablier, montre...).

  progress

  Ce curseur indique qu'un traitement est en cours mais sans empêcher l'utilisation de l'application.

  wait

  Curseur fréquemment utilisé sur les liens ou les boutons.

  help

  Curseur indiquant qu'une aide est disponible sur cet élément.

  context-menu

  Curseur indiquant la présence d'un menu contextuel sur l'élément.
  wait

  progress

  pointer

  help

  context-menu

Curseurs indiquant la possibilité de sélection.

• cursor: text; cursor: vertical-text; cursor: cell; cursor: crosshair;
  text

  Curseur apparaissant en général sur du texte. Indique la possibilité de sélectionner du texte. Si le texte est écrit verticalement (voir la propriété writing-mode le navigateur doit utiliser la forme vertical-text pour le curseur.

  vertical-text

  Curseur indiquant la possibilité de sélection sur un texte écrit verticalement.

  cell

  Curseur indiquant la possibilité de sélectionner une cellule.

  crosshair

  Curseur en forme d'une croix fine.
  text

  vertical-text

  cell

  crosshair

Curseurs indiquant la possibilité de zoomer.

• cursor: zoom-in; cursor: zoom-out;
  zoom-in

  Curseur indiquant qu'il est possible de zoomer sur cet élément.

  zoom-out

  Curseur symétrique du précédent.
  zoom-in

  zoom-out

Curseurs indiquant la possibilité d'un déplacement.

• cursor: move; cursor: grab; cursor: grabbing; cursor: alias; cursor: copy; cursor: no-drop; cursor: not-allowed; cursor: all-scroll;
  move

  curseur indiquant la possibilité de déplacer l'élément.

  grab

  indique que l'élément sur lequel se trouve la souris peut être saisi, par exemple en vue de son déplacement.

  grabbing

  indique que l'élément est saisi (bouton de la souris enfoncé).

  alias

  indique qu'un alias de l'élément peut ou va être créé.

  copy

  indique que l'élément peut ou va être copié.

  no-drop

  curseur indiquant qu'un élément ne peut pas être déposé ici.

  not-allowed

  curseur indiquant une action interdite, en général que l'élément en cours de déplacement ne peut pas être déposé ici.

  all-scroll

  curseur indiquant la possibilité de faire défiler l'élément, horizontalement et verticalement.
  move

  grab

  grabbing

  alias

  no-drop

  not-allowed

  all-scroll

Curseurs indiquant la possibilité d'un dimensionnement.

• cursor: col-resize; cursor: row-resize;
  col-resize

  Curseur indiquant que la largeur d'une colonne peut être ajustée.

  row-resize

  Curseur indiquant que la hauteur d'une ligne peut être ajustée.
  col-resize

  row-resize
• cursor: n-resize; cursor: ne-resize; cursor: e-resize; cursor: se-resize; cursor: s-resize; cursor: sw-resize; cursor: w-resize; cursor: nw-resize;

  Curseurs indiquant la possibilité de dimensionner l'élément par l'un de ses bords :

  n-resize

  le bord du haut (le nord).

  ne-resize

  le coin en haut à droite (le nord-est).

  e-resize

  bord droit (l'est).

  se-resize

  le coin en bas à droite (le sud-est).

  s-resize

  le bord du bas (le Sud).

  sw-resize

  le coin en bas à gauche (le sud-ouest).

  w-resize

  le bord gauche (l'ouest ou West en anglais).

  nw-resize

  le coin en haut à gauche (le nord-ouest).
  n-resize

  ne-resize

  e-resize

  se-resize

  s-resize

  sw-resize

  w-resize

  nw-resize

  Remarque : plusieurs de ces curseurs relatifs au dimensionnement ont une forme identique.

• cursor: ew-resize; cursor: ns-resize; cursor: nwse-resize; cursor: nesw-resize;

  Curseurs indiquant la possibilité de dimensionner l'élément suivant une direction :

  ew-resize

  dimensionnement de l'élément dans le sens horizontal (est-ouest).

  ns-resize

  dimensionnement de l'élément dans le sens vertical (nord-sud).

  nwse-resize

  dimensionnement de l'élément suivant la première diagonale.

  nesw-resize

  dimensionnement de l'élément suivant la deuxième diagonale.
  ew-resize

  ns-resize

  nwse-resize

  nesw-resize

Curseurs personnalisés.

• cursor: url('...') x y, url('...') x y, défaut;

  Curseur personnalisé défini par un fichier .png, .cur, .gif, etc. (tous les navigateurs n'acceptent pas les mêmes formats de fichier). Plusieurs ensembles url(...) x y peuvent être indiqués en les séparant par une virgule. Le navigateur utilise le premier fichier trouvé et correct.
  défaut est le curseur par défaut à utiliser si le fichier spécifié est introuvable ou incorrect. Cette valeur est obligatoire.
  x et y sont les coordonnées du point chaud, c'est à dire l'endroit précis du curseur où s'effectue le clic. Si ces valeurs ne sont pas précisées, elles sont fixées à 0 (le coin en haut à gauche du curseur).
  Les dimensions du curseur peuvent varier d'un navigateur à l'autre ou d'un système à l'autre.

  Dans le premier exemple ci-dessous, les valeurs x et y n'ont pas été précisées, mais la forme du curseur (le crayon) fait que le point chaud est bien positionné en haut à gauche de l'image.
  Dans le deuxième exemple, l'utilisation du curseur n'est pas du tout instinctive. Vous pourrez le constater en essayant de sélectionner une partie du texte. en effet, le point chaud a été laissé en haut à gauche de l'image, ce qui ne correspond pas à la pointe du crayon.
  Enfin, dans le troisième exemple, le point chaud est correctement positionné à 22 0, ce qui correspond au coin en haut à droite de l'image : la pointe du crayon.

  url()

  url()

  url()
• cursor: initial; (auto) cursor: inherit; cursor: revert; cursor: revertLayer; cursor: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété cursor.

Nous parlons ici de l'animation du curseur via CSS, et non pas d'un curseur animé parce que son fichier graphique est animé. C'est en principe cette deuxième solution qui est la plus courante. Voici cependant une petite animation du curseur réalisée en CSS.

Manipulation de la propriété cursor par programme.

Modifier la valeur de cursor en Javascript.

Deux syntaxes sont possibles en Javascript pour modifier la valeur de la propriété cursor.

let el = document.getElementById('id'); el.style['cursor'] = 'wait'; // ou let el = document.getElementById('id'); el.style.cursor = 'wait';

Lire en Javascript la valeur de cursor.

Ce code relit la valeur de la propriété cursor à condition que cette dernière ait été affectée directement à l'élément lui-même via l'attribut style du HTML, et non pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['cursor']; // ou let el = document.getElementById('id'); let value = el.style.cursor;

Lire la valeur calculée de cursor en Javascript.

La valeur calculée est celle qui résulte de la cascade des héritages. Le navigateur traite d'abord une valeur éventuellement affectée directement soir via l'attribut style du HTML, soit via un sélecteur CSS. A défaut, il recherche une valeur héritée. Enfin, en dernier recours, la valeur calculée sera la valeur initiale de la propriété.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('cursor');

Modifier la valeur de la propriété cursor avec JQuery.

JQuery possède également une syntaxe pour affecter la propriété.


$('#id').css('cursor', 'wait');


Lire la valeur calculée de la propriété cursor avec JQuery.

let value = $('#id').css('cursor');

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété cursor et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Dans le cas de cursor cela ne fera pas de différences, sauf si vous affectez une valeur inexistante : dans ce cas la valeur affectée est vide, et la valeur calculée est auto.

Simulateur avec la propriété cursor.

Prise en charge de cursor par les navigateurs.

Voici comment interpréter les différentes colonnes du tableau de compatibilité :

1

Propriété
cursor

2

Valeurs
zoom-in
zoom-out

3

Valeurs
grab
grabbing

4

cursor
avec
url()

5

cursor
url()
Position

Estimation de la prise en charge globale.

80%

79%

79%

95%

81%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Historique de la propriété cursor.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Définition initiale de la propriété cursor dans la spécification CSS version 2.xx
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Interface utilisateur de base - Niveau 3

  Ajout de nombreux nouveaux curseurs.
  Lorsque le curseur est défini par une image, possibilité de définir le point chaud.
  

  02 Août 2002

  Document de travail.

  

  07 Juillet 2015

  Candidat à la recommandation.

  

  14 Décembre 2017

  Proposé à la recommandation.

  

  21 Juin 2018

  Recommandation.

• Module CSS - Interface utilisateur de base - Niveau 4

  Pas de changement concernant la propriété cursor.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, au sujet de la personnalisation de l'interface utilisateur.

Les possibilités de personnalisation ou de stylisation de l'interface utilisateur sont décrites dans la spécification du W3C CSS Basic User Interface Module . Voici les principales propriétés qui agissent sur l'interface utilisateur :

Propriétés :