Cursor - Propriété CSS
Résumé des caractéristiques de la propriété cursor
auto | default | none | pointer | wait | progress | help | context-menu | text | vertical-text | cell | crosshair | alias | grab | grabbing | move | copy | no-drop | not-allowed | all-scroll | zoom-in | zoom-out | col-resize | row-resize | n-resize | ne-resize | e-resize | se-resize | s-resize | sw-resize | w-resize | nw-resize | ew-resize | ns-resize | nwse-resize | nesw-resizeautocursor passe d'une valeur à l'autre sans transition.Schéma syntaxique de cursor.
cursorLes liens du schéma donnent accès à des exempless
Télécharger le schéma en SVG
Description des termes utilisés sur le schéma :
urlest le chemin d'accès à un fichier image. Plusieurs url peuvent être spécifiées en les séparant par des virgules.xetysont les coordonnées du point chaud dans l'image du curseur.defaultest un curseur par défaut pour le cas où l'url ne serait pas trouvée ou invalide.
Description.
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,
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;
autoValeur par défaut. Le curseur est défini par le navigateur en fonction de l'endroit où se trouve la souris.defaultCurseur du système d'exploitation. En général une flèche inclinée.noneAucun curseur n'est affiché lorsque la souris survole l'élément.autodefaultnone
Curseurs indiquant un état du système ou de l'élément.
- cursor: wait; cursor: progress; cursor: pointer; cursor: help; cursor: context-menu;
waitCurseur indiquant qu'un traitement est en cours (roue tournante, sablier, montre...).progressCe curseur indique qu'un traitement est en cours mais sans empêcher l'utilisation de l'application.waitCurseur fréquemment utilisé sur les liens ou les boutons.helpCurseur indiquant qu'une aide est disponible sur cet élément.context-menuCurseur indiquant la présence d'un menu contextuel sur l'élément.waitprogresspointerhelpcontext-menu
Curseurs indiquant la possibilité de sélection.
- cursor: text; cursor: vertical-text; cursor: cell; cursor: crosshair;
textCurseur 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-modele navigateur doit utiliser la formevertical-textpour le curseur.vertical-textCurseur indiquant la possibilité de sélection sur un texte écrit verticalement.cellCurseur indiquant la possibilité de sélectionner une cellule.crosshairCurseur en forme d'une croix fine.textvertical-textcellcrosshair
Curseurs indiquant la possibilité de zoomer.
- cursor: zoom-in; cursor: zoom-out;
zoom-inCurseur indiquant qu'il est possible de zoomer sur cet élément.zoom-outCurseur symétrique du précédent.zoom-inzoom-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;
movecurseur indiquant la possibilité de déplacer l'élément.grabindique que l'élément sur lequel se trouve la souris peut être saisi, par exemple en vue de son déplacement.grabbingindique que l'élément est saisi (bouton de la souris enfoncé).aliasindique qu'un alias de l'élément peut ou va être créé.copyindique que l'élément peut ou va être copié.no-dropcurseur indiquant qu'un élément ne peut pas être déposé ici.not-allowedcurseur 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-scrollcurseur indiquant la possibilité de faire défiler l'élément, horizontalement et verticalement.movegrabgrabbingaliasno-dropnot-allowedall-scroll
Curseurs indiquant la possibilité d'un dimensionnement.
- cursor: col-resize; cursor: row-resize;
col-resizeCurseur indiquant que la largeur d'une colonne peut être ajustée.row-resizeCurseur indiquant que la hauteur d'une ligne peut être ajustée.col-resizerow-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;
Curseur indiquant la possibilité de dimensionner l'élément par l'un de ses bords :
n-resizele bord du haut (le nord).ne-resizele coin en haut à droite (le nord-est).e-resizebord droit (l'est).se-resizele coin en bas à droite (le sud-est).s-resizele bord du bas (le Sud).sw-resizele coin en bas à gauche (le sud-ouest).w-resizele bord gauche (l'ouest ou West en anglais).nw-resizele coin en haut à gauche (le nord-ouest).n-resizene-resizee-resizese-resizes-resizesw-resizew-resizenw-resizeRemarque : plusieurs de ces curseurs relatifs au dimensionnement ont une forme identique.
- cursor: ew-resize; cursor: ns-resize; cursor: nwse-resize; cursor: nesw-resize;
Curseur indiquant la possibilité de dimensionner l'élément suivant une direction :
ew-resizedimensionnement de l'élément dans le sens horizontal (est-ouest).ns-resizedimensionnement de l'élément dans le sens vertical (nord-sud).nwse-resizedimensionnement de l'élément suivant la première diagonale.nesw-resizedimensionnement de l'élément suivant la deuxième diagonale.ew-resizens-resizenwse-resizenesw-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 ypeuvent être indiqués en les séparant par une virgule. Le navigateur utilise le premier fichier trouvé et correct.
défautest le curseur par défaut à utiliser si le fichier spécifié est introuvable ou incorrect. Cette valeur est obligatoire.
xetysont 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
xetyn'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()
Valeurs communes :
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 du curseur.
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.
Pour voir fonctionner les exemples de code donnés ci-après, vous pouvez cliquer sur les boutons "Test", et approchez ensuite la souris de l'élément bleu ci-dessous pour constater la nouvelle forme du curseur de souris.
Modifier la valeur de cursor en Javascript.
Deux syntaxes sont possibles en Javascript pour modifier la valeur de la propriété cursor.
function setCursor(el) {
el.style['cursor']='wait';
// ou
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.
function getCursor(el) {
alert(el.style['cursor']);
// ou
alert(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é.
function getCalcCursor(el) {
alert(window.getComputedStyle(el).getPropertyValue('cursor'));
}
Modifier la valeur de la propriété cursor avec JQuery.
function setCursor(el) {
$(el).css('cursor','not-allowed');
}
Lire la valeur calculée de la propriété cursor avec JQuery.
function getCalcCursor(el) {
return $(el).css('cursor');
}
Simulateur.
sur un texte vertical
Compatibilité en fonction des navigateurs.
Voici comment interpréter les différentes colonnes du tableau de compatibilité :
cursor avec les principales valeurs.
cursor.
cursor.
url().
x y par rapport à cette image.
cursorzoom-in
zoom-outgrabgrabbingcursoravec
url()cursor
url()Position
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
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écursordans la spécification CSS version 2.xx
04 Novembre 1997Document de travail.
24 Mars 1998Proposé à la recommandation.
11 Mai 1998Recommandation. -
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 2002Document de travail.
07 Juillet 2015Candidat à la recommandation.14 Décembre 2017Proposé à la recommandation.21 Juin 2018Recommandation. -
Module CSS - Interface utilisateur de base - Niveau 4
Pas de changement concernant la propriétécursor.22 Septembre 2015Document 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 :