Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

cursor - Propriété CSS

cursor

Résumé des caractéristiques de la propriété cursor

Description rapide
Définit la forme du curseur de la souris.
Statut
Standard
Type de valeur
Valeur prédéfinie | Image
Valeurs prédéfinies
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-resize
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété cursor passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Interface utilisateur de base
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

Statut du document:: Ancienne norme, obsolète

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.

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

Syntaxes pour cursor.

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

Syntaxe de cursorSchéma syntaxique de la propriété CSS cursor (choix d'un pointeur pour la souris). auto auto default default none none etc. etc. url(urlurl(url) x y x y , , , default , defaultcursor:;cursor:;Télécharger l'image en SVG

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;

    Curseur 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;

    Curseur 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; cursor: inherit; cursor: revert; cursor: revert-layer; cursor: unset;

    La valeur initiale est : auto.

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.

Approchez la souris de cet élément

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.

cursor :
Déplacez le curseur de la souris sur ce bloc pour voir le curseur choisi.
Forme du curseur
sur un texte vertical

Compatibilité en fonction des navigateurs.

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

Colonne 1
Prise en charge de la propriété cursor avec les principales valeurs.
Colonne 2
Prise en charge des valeurs de zoom avec la propriété cursor.
Colonne 3
Prise en charge des valeurs suggérant le déplacement d'un élément avec la propriété cursor.
Colonne 4
Possibilité d'utiliser une image personnalisée pour le curseur, cette image étant spécifiée par la fonction url().
Colonne 4
Possibilité d'utiliser une image personnalisée et de préciser le point chaud : coordonnées x y par rapport à cette image.
1
cursor
2
zoom-in
zoom-out
3
grab
grabbing
4
cursor
url()
5
cursor
url()

Position
Estimation de la prise en charge en pourcentage du parc actuel.
79%
80%
80%
97%
97%

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

Oméra mini

Voir aussi, dans le même module de standardisation que cursor.

Les spécifications CSS éditées par le W3C sont organisées en modules. cursor fait partie du Module CSS - Interface utilisateur de base (CSS Basic User Interface Module ). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit la couleur des élément actifs, cochés.
Définit toutes les propriétés nécessaires pour qu'un élément soit affiché comme un bouton, un menu, etc.
Définit la couleur et la forme du marqueur de texte.
Choisit la couleur du marqueur de texte (curseur clignotant).
Définit la forme du curseur de texte.
Définit l'accessibilité d'une zone de saisie.
Résumé des caractéristiques d'encadrement.
Définit la couleur de l'encadrement (outline).
Définit l'espacement entre le contour et l'élément.
Définit le type de trait des contours (simple, double, pointillé...).
Définit l'épaisseur du trait d'encadrement.
Autorise ou empêche le dimensionnement de l'élément. par l'utilisateur.
Définit si le contenu d'un élément est sélectionnable par l'utilisateur ou non.