CSS cursor : toutes les valeurs, curseurs personnalisés et opacité
Galerie des curseurs CSS
CSS cursor : chaque valeur à survoler, curseurs personnalisés, opacité | We.Inc
Survolez une tuile pour chacune des 36 valeurs standard de la propriété CSS cursor, créez un curseur image personnalisé avec hotspot et valeur de repli, et découvrez quand estomper avec opacity, visibility ou rgba.
La propriété cursor définit le pointeur de souris affiché au-dessus d'un élément, par exemple cursor: pointer pour les éléments cliquables, not-allowed pour les contrôles désactivés et grab pour les éléments déplaçables. Les curseurs personnalisés utilisent url() avec une image, des coordonnées de hotspot facultatives et un mot-clé de repli obligatoire. Survolez chaque tuile ci-dessous pour voir les 36 valeurs standard dans votre navigateur.
Les curseurs que vous utiliserez le plus
État
CSS
Tailwind
Lien ou bouton
cursor: pointer
Contrôle désactivé
cursor: not-allowed
Déplaçable / en cours de glisser
cursor: grab / grabbing
cursor-grab / cursor-grabbing
Texte modifiable
cursor: text
Redimensionner une colonne
cursor: col-resize
Occupé mais utilisable
cursor: progress
Il est facile de se tromper sur le nom d'un curseur, et chaque système d'exploitation les dessine un peu différemment. Cette galerie vous permet de survoler chaque mot-clé dans votre propre navigateur, puis montre comment créer un curseur image personnalisé qui se replie proprement, ainsi que les astuces d'opacité correspondantes pour les états estompés et désactivés.
Survolez n'importe quelle tuile de la galerie pour voir ce curseur tel que votre système le dessine. Cliquez sur une tuile pour copier sa déclaration.
Utilisez le filtre pour limiter la liste aux curseurs de liens, de redimensionnement, de glisser-déposer ou d'état.
Ouvrez le générateur de curseur personnalisé, ajustez le hotspot et testez le résultat dans la zone prévue.
Lisez la section sur l'opacité pour choisir entre opacity, visibility et les couleurs rgba pour vos fondus.
Les navigateurs affichent déjà pointer sur les liens. Ajoutez-le vous-même aux boutons et aux autres éléments cliquables, car les boutons affichent la flèche par défaut.
Gardez les images de curseur personnalisé à 32 par 32 pixels ou moins. Certains navigateurs et systèmes d'exploitation peuvent ignorer les images plus grandes.
Terminez toujours une liste de curseurs par un mot-clé comme auto ou pointer. Le mot-clé est obligatoire après les valeurs url().
Les écrans tactiles n'ont aucun curseur, alors n'utilisez jamais le curseur comme seul indice qu'un élément est interactif.
Questions fréquentes
Comment créer un curseur personnalisé en CSS ?
Écrivez cursor: url(cursor.svg) 4 4, auto; où l'image est un petit fichier PNG, SVG ou CUR, les deux nombres sont le hotspot en pixels depuis le coin supérieur gauche, et auto est le mot-clé de repli utilisé si l'image ne se charge pas. Vous pouvez lister plusieurs images url() avant le mot-clé.
Quel curseur doit afficher un bouton désactivé ?
not-allowed est le choix habituel. Ciblez-le avec button:disabled { cursor: not-allowed; opacity: 0.5; } et gardez le véritable attribut disabled, afin que les utilisateurs du clavier et des lecteurs d'écran soient informés que le contrôle est indisponible, pas seulement les utilisateurs de la souris.
Quelle est la différence entre opacity et visibility ?
opacity estompe tout l'élément, enfants compris, et un élément totalement transparent reçoit toujours les clics et le focus. visibility: hidden désactive l'élément à la fois pour le pointeur et pour les technologies d'assistance tout en conservant son espace. Utilisez opacity pour le fondu lui-même et changez visibility à la fin pour que les éléments invisibles ne puissent pas être cliqués.
Pourquoi opacity rend-il aussi mon texte transparent ?
opacity s'applique à tout ce qui se trouve dans l'élément. Pour rendre seulement l'arrière-plan transparent, utilisez plutôt une couleur translucide : background-color: rgb(0 0 0 / 0.5), ou l'ancienne syntaxe rgba(0, 0, 0, 0.5). Le texte reste entièrement opaque.
Puis-je masquer le curseur ?
cursor: none le masque au-dessus de l'élément, ce dont les jeux, les bornes interactives et les lecteurs vidéo ont parfois besoin. Utilisez-le avec parcimonie sur les sites classiques, car les gens perdent de vue l'endroit qu'ils pointent.
Les curseurs sont des indices, pas des contrôles
Le curseur indique aux utilisateurs de la souris ce qui va se passer avant qu'ils cliquent. Un pointeur promet une cible cliquable, un curseur de texte promet du texte sélectionnable ou modifiable, et une flèche de redimensionnement promet un glisser. Afficher un pointeur sur un élément qui ne fait rien, c'est une promesse non tenue.
Les utilisateurs du clavier, du tactile et des lecteurs d'écran ne voient jamais ces indices. Les éléments interactifs doivent quand même avoir l'air interactifs, avoir un style de focus visible et utiliser de vrais boutons et liens pour que leur rôle soit annoncé.
Des curseurs image personnalisés qui ne cassent pas
Une image de curseur est récupérée comme n'importe quelle autre image, donc un téléchargement lent ou en échec laisse le mot-clé de repli en place. Un SVG data: intégré évite complètement la requête et reste net sur les écrans haute densité.
Le hotspot est le pixel exact qui clique. Pour une flèche, c'est la pointe, généralement près de 0 0 ; pour une croix ou un cercle, c'est le centre. Un mauvais hotspot fait atterrir les clics à quelques pixels de l'endroit visé.
Bien estomper les éléments
Pour un aspect désactivé, combinez une opacité autour de 0.5 avec cursor: not-allowed et l'attribut disabled. Vérifiez que le texte estompé respecte toujours les exigences de contraste si les gens doivent le lire.
Pour les apparitions au survol, animez opacity car son rendu est peu coûteux, et associez-la à visibility pour que l'élément ne puisse pas être cliqué tant qu'il est transparent. Une couleur avec un canal alpha est le bon outil quand une seule couche, comme un arrière-plan ou une bordure, doit être translucide.
Les 36 valeurs de cursor
Mots-clés standard de cursor (CSS Basic User Interface Level 4) ; les classes Tailwind sont cursor-<value>
Valeur
Groupe
Signification
Général
Le navigateur décide selon le contexte
Général
La flèche du système
Général
Aucun curseur affiché
Liens et état
Un menu contextuel est disponible
Liens et état
Une aide est disponible
Liens et état
Un lien ou un contrôle cliquable
Liens et état
Occupé, mais vous pouvez encore interagir
Liens et état
Occupé, interaction impossible pour l'instant
Sélection
Une ou plusieurs cellules de tableau peuvent être sélectionnées
Sélection
Sélection précise en deux dimensions
Sélection
Le texte peut être sélectionné ou modifié
Sélection
Le texte vertical peut être sélectionné
Glisser-déposer
Un raccourci ou un alias sera créé
Glisser-déposer
Quelque chose sera copié
Glisser-déposer
Quelque chose sera déplacé
Glisser-déposer
Impossible de déposer ici
Glisser-déposer
L'action n'est pas autorisée
Glisser-déposer
Peut être saisi et déplacé
Glisser-déposer
En cours de déplacement
Redimensionnement et défilement
Défilement possible dans toutes les directions
Redimensionnement et défilement
Redimensionner une colonne horizontalement
Redimensionnement et défilement
Redimensionner une ligne verticalement
Redimensionnement et défilement
Déplacer le bord supérieur
Redimensionnement et défilement
Déplacer le bord droit
Redimensionnement et défilement
Déplacer le bord inférieur
Redimensionnement et défilement
Déplacer le bord gauche
Redimensionnement et défilement
Déplacer le coin supérieur droit
Redimensionnement et défilement
Déplacer le coin supérieur gauche
Redimensionnement et défilement
Déplacer le coin inférieur droit
Redimensionnement et défilement
Déplacer le coin inférieur gauche
Redimensionnement et défilement
Redimensionner vers la gauche ou la droite
Redimensionnement et défilement
Redimensionner vers le haut ou le bas
Redimensionnement et défilement
Redimensionner selon la diagonale montante
Redimensionnement et défilement
Redimensionner selon la diagonale descendante
Zoom
Zoom avant possible
Zoom
Zoom arrière possible
Curseur personnalisé avec hotspot et repli
Curseur en anneau SVG intégré, centré sur son hotspot
Le hotspot 12 12 place le clic au centre de l'anneau. crosshair est utilisé si l'image n'est pas acceptée.
États désactivé, glisser et redimensionnement
Des curseurs adaptés à l'interaction
Survolez chaque élément. La carte déplaçable passe à grabbing tant que le bouton de la souris est maintenu.
opacity vs visibility vs rgba
Choisir comment estomper
Technique
Affecte les enfants ?
Toujours cliquable ?
Animation fluide ?
Tailwind
opacity: 0.5
Oui, tout ce qu'il contient
Oui
Oui
visibility: hidden
Oui (les enfants peuvent s'en exclure)
Non
Bascule instantanément
background: rgb(0 0 0 / 0.5)
Non, seulement cette couche
Oui
Oui
bg-black/50
color: rgb(17 17 17 / 0.6)
Non, seulement le texte
Oui
Oui
text-black/60
Opacité de l'élément entier à côté d'un arrière-plan translucide
La bannière de gauche estompe son texte en même temps que la boîte. Celle de droite garde un texte net sur un arrière-plan transparent.
Le navigateur décide selon le contexte
La flèche du système
Aucun curseur affiché
Un menu contextuel est disponible
Une aide est disponible
Un lien ou un contrôle cliquable
Occupé, mais vous pouvez encore interagir
Occupé, interaction impossible pour l'instant
Une ou plusieurs cellules de tableau peuvent être sélectionnées