Visualiseur de curseurs CSS : teste tous les types de curseurs en direct
Le visualiseur de curseurs CSS affiche les 36 valeurs de la propriété CSS cursor, classées par usage, avec le véritable pointeur de ton système. Survole par exemple not-allowed pour voir le cercle barré, puis copie cursor: not-allowed; en un clic. Gratuit, sans inscription : tout fonctionne dans ton navigateur.
Créé par Justin Schuessler
Ton code est prêt ? Mets ton site en ligne avec un hébergement web rapide et fiable.
Toutes les valeurs de cursor par usage
Usage
36 valeurs sur 36
L’aperçu montre le curseur tel que ton système d’exploitation et ton navigateur l’affichent. Beaucoup de curseurs ont donc un aspect différent sous macOS, Windows et Linux.
Général3
autoLe navigateur choisit lui-même, par exemple le curseur de texte sur du texte et la flèche ailleurs. C’est la valeur par défaut.
Déplace la souris icidefaultLa flèche normale, même sur du texte. Pour les zones non cliquables.
Déplace la souris icinoneMasque le pointeur de la souris, par exemple pour les vidéos en plein écran, les jeux ou un curseur personnalisé.
Déplace la souris ici
Liens et états5
pointerLa main avec l’index pointé pour les liens, les boutons et tout ce qui est cliquable.
Déplace la souris icihelpUn point d’interrogation près de la flèche lorsqu’une aide est disponible, par exemple sur une icône d’information avec infobulle.
Déplace la souris icicontext-menuIndique qu’un menu contextuel est disponible, par exemple pour les éléments ayant leur propre menu au clic droit.
Déplace la souris iciprogressUne flèche avec une icône de chargement : un chargement s’effectue en arrière-plan, mais la page reste utilisable.
Déplace la souris iciwaitUne icône de chargement sans flèche : l’interface est bloquée jusqu’à la fin de l’opération.
Déplace la souris ici
Sélection4
textLe curseur de texte (en forme de I) pour les champs de saisie et le texte sélectionnable.
Déplace la souris icivertical-textLe curseur de texte horizontal pour le texte écrit verticalement, par exemple avec writing-mode: vertical-rl.
Déplace la souris icicellUn gros plus pour les cellules sélectionnables, comme dans un tableur.
Déplace la souris icicrosshairLe réticule pour les tâches de précision, par exemple sur une zone de dessin, avec une pipette ou pour sélectionner une partie d’image.
Déplace la souris ici
Glisser-déposer7
grabUne main ouverte pour les éléments déplaçables, comme les cartes, les éléments de liste ou les curseurs de réglage.
Déplace la souris icigrabbingUne main fermée pendant le déplacement d’un élément.
Déplace la souris icimoveDes flèches en croix pour les éléments déplaçables librement, comme les fenêtres ou les widgets.
Déplace la souris icicopyUne flèche avec un plus : le dépôt crée une copie, par exemple lors du déplacement de fichiers.
Déplace la souris icialiasUne flèche avec une icône de lien : le dépôt crée un lien ou un raccourci.
Déplace la souris icino-dropL’élément déplacé ne peut pas être déposé ici, par exemple hors d’une zone de dépôt.
Déplace la souris icinot-allowedLe cercle barré pour les boutons désactivés et les actions temporairement interdites.
Déplace la souris ici
Redimensionner14
col-resizeModifie la largeur des colonnes, par exemple sur les séparateurs de colonnes d’un tableau ou d’une vue fractionnée.
Déplace la souris icirow-resizeModifie la hauteur des lignes, par exemple sur les séparateurs horizontaux entre deux zones.
Déplace la souris icin-resizeFais glisser le bord supérieur pour agrandir un élément vers le haut.
Déplace la souris icie-resizeFais glisser le bord droit pour agrandir un élément vers la droite.
Déplace la souris icis-resizeFais glisser le bord inférieur pour agrandir un élément vers le bas.
Déplace la souris iciw-resizeFais glisser le bord gauche pour agrandir un élément vers la gauche.
Déplace la souris icine-resizeFais glisser le coin supérieur droit pour modifier la largeur et la hauteur.
Déplace la souris icinw-resizeFais glisser le coin supérieur gauche pour modifier la largeur et la hauteur.
Déplace la souris icise-resizeFais glisser le coin inférieur droit pour modifier la largeur et la hauteur.
Déplace la souris icisw-resizeFais glisser le coin inférieur gauche pour modifier la largeur et la hauteur.
Déplace la souris iciew-resizeRedimensionne horizontalement, par exemple sur un curseur de réglage horizontal ou un séparateur.
Déplace la souris icins-resizeRedimensionne verticalement, par exemple sur un séparateur vertical.
Déplace la souris icinesw-resizeRedimensionne en diagonale du coin supérieur droit vers le coin inférieur gauche, par exemple depuis le coin d’un panneau.
Déplace la souris icinwse-resizeRedimensionne en diagonale du coin supérieur gauche vers le coin inférieur droit, par exemple avec la poignée en bas à droite d’un panneau.
Déplace la souris ici
Défilement et zoom3
all-scrollDes flèches dans toutes les directions : le contenu peut défiler dans tous les sens, par exemple une carte.
Déplace la souris icizoom-inUne loupe avec un plus pour les images ou cartes agrandissables d’un clic.
Déplace la souris icizoom-outUne loupe avec un moins lorsqu’un clic réduit une image agrandie.
Déplace la souris ici
Zone de test : les curseurs en action
Passe la souris sur les exemples, fais glisser la carte, le séparateur et le coin du panneau, puis clique sur l’image.
Bouton
pointerBouton désactivé
not-allowedLien textuel
Pour en savoir plus, consulte la Documentation.
pointerChamp de saisie
textCarte déplaçable
Carte
Faire glisser pour déplacer
grabgrabbingModifier la largeur des colonnes
Colonne A · 50 %Colonne B · 50 %col-resizeFaire glisser le coin du panneau
Panel
160 × 80 px
nwse-resizeÉtat de chargement
Chargement en arrière-plan
Tu peux continuer à travailler.
Patiente un instant
La zone est bloquée.
progresswaitImage zoomable
zoom-inzoom-out
Vue d’ensemble
Qu’est-ce que la propriété CSS cursor ?
La propriété CSS cursor définit quel pointeur de souris apparaît au survol d’un élément. Elle indique ce qui s’y passe : la main de pointer signifie que l’élément est cliquable, le curseur de texte qu’il est sélectionnable, et le cercle barré de not-allowed qu’il est désactivé. Sans valeur définie, auto s’applique et le navigateur choisit.
Syntaxe
Un mot-clé par règle suffit. Les états comme :disabled ou :active ont leur propre curseur :
button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
.card[draggable="true"] {
cursor: grab;
}
.card[draggable="true"]:active {
cursor: grabbing;
}Les classes utilitaires comme cursor-pointer dans Tailwind CSS appliquent la même déclaration cursor: pointer;. L’outil, lui, copie du CSS pur, pas des classes.
36 valeurs standard
La spécification CSS prévoit 36 mots-clés, de auto et pointer aux 14 curseurs de redimensionnement. Cet outil les présente tous, classés par usage.
Hérité
cursor s’applique à l’élément et à tous ses enfants, sauf si un enfant définit sa propre valeur. Un cursor: pointer sur un conteneur s’applique donc aussi au texte qu’il contient.
Le système dessine
CSS définit uniquement quel curseur apparaît. Son apparence dépend du système d’exploitation et du navigateur. Il est donc différent sous macOS, Windows et Linux.
Pas besoin de :hover
Le curseur n’apparaît de toute façon que lorsque la souris survole l’élément. Définis donc cursor directement sur l’élément : aucune règle :hover distincte n’est nécessaire.
Types de curseurs
Vue d’ensemble des 36 types de curseurs CSS
L’outil classe les valeurs de la propriété CSS cursor en six groupes selon leur usage. Le filtre « Usage » te permet de n’afficher qu’un groupe.
Général3
La valeur standard auto, la flèche normale default et none, qui masque le pointeur de la souris.
autodefaultnone
Liens et états5
La main pour les éléments cliquables, l’aide, le menu contextuel et les deux états de chargement progress et wait.
pointerhelpcontext-menuprogresswait
Sélection4
Le curseur de texte horizontal ou vertical, le plus pour les cellules de tableau et le réticule pour les tâches de précision.
textvertical-textcellcrosshair
Glisser-déposer7
La main ouverte ou fermée, la croix de déplacement et les indications de dépôt : copie, lien, dépôt impossible ou interdit.
grabgrabbingmovecopyaliasno-dropnot-allowed
Redimensionner14
14 curseurs de redimensionnement pour les bords, les coins, les colonnes et les lignes, de n-resize à nwse-resize.
col-resizerow-resizen-resizee-resizes-resizew-resizene-resizenw-resizese-resizesw-resizeew-resizens-resizenesw-resizenwse-resize
Défilement et zoom3
Le défilement dans toutes les directions et la loupe avec un plus ou un moins pour les images et les cartes.
all-scrollzoom-inzoom-out
Bonnes pratiques
Quel curseur CSS utiliser et quand ?
Le curseur fait une promesse à l’utilisateur. Ces règles permettent de la tenir.
pointer uniquement pour les éléments cliquables
La main promet qu’un clic déclenchera une action. Utilise-la sur les liens, les boutons et les cartes cliquables, mais pas sur du texte ou des zones sans fonction.
not-allowed pour les états désactivés
Un bouton désactivé reçoit cursor: not-allowed. Attention : avec pointer-events: none, aucun curseur ne s’affiche, car l’élément ne détecte plus la souris.
grab et grabbing pour le glisser-déposer
Un élément déplaçable affiche grab. Pendant le déplacement, le curseur passe à grabbing, par exemple avec :active ou une classe définie par ton script.
text pour les champs de saisie et le texte
Les champs de saisie affichent déjà le curseur de texte. N’utilise text que là où le contenu peut réellement être sélectionné ou modifié.
progress plutôt que wait
Si un chargement s’effectue en arrière-plan et que la page reste utilisable, utilise progress. Réserve wait aux cas où l’interface est réellement bloquée.
none uniquement avec un curseur de remplacement
Un pointeur invisible prête à confusion. cursor: none convient aux jeux, aux vidéos en plein écran ou à un curseur personnalisé qui remplace le pointeur du système.
Comment ça fonctionne
Comment trouver le bon curseur CSS
Trois étapes, sans inscription ni installation.
Étape 1
Trouver un curseur
Recherche une valeur, un usage comme resize ou drag, ou un état comme disabled, ou filtre par groupe.
Étape 2
Essayer les curseurs
Passe la souris sur l’aperçu d’une vignette ou utilise les exemples de la zone de test pour voir le curseur réel de ton système.
Étape 3
Copier la déclaration
Un clic sur Copier place uniquement la déclaration dans le presse-papiers, par exemple cursor: not-allowed;. Colle-la dans ta règle CSS.
Curseurs personnalisés
Définir un curseur personnalisé avec url()
Au lieu d’un mot-clé, tu peux utiliser une image comme curseur. L’adresse de l’image peut être suivie des coordonnées facultatives du point actif, c’est-à-dire du point qui sert à cliquer. Termine toujours par un mot-clé de remplacement au cas où l’image ne se chargerait pas.
.canvas {
cursor:
url("/cursors/pencil.svg") 2 30,
crosshair;
}Les formats PNG et SVG conviennent. Les navigateurs n’affichent les curseurs personnalisés que jusqu’à 128 × 128 pixels ; la taille habituelle est de 32 × 32. L’image du curseur doit permettre de repérer clairement le point de clic.
Découvrir plus
Autres outils
Formateur HTML et CSS en ligne (embellir le code)
Formate, indente et embellis du HTML et du CSS en ligne, avec détection automatique de la langue. Tout fonctionne dans le navigateur, sans envoi de fichier.
Créé par Luca Stanek
Convertir un SVG en PNG (SVG to PNG)
NouveauConvertis un SVG en PNG : enregistre tes images vectorielles avec une netteté parfaite à toute taille, au format PNG, JPG ou WebP, avec un fond transparent et des modèles pour favicon, emoji Discord et icône de serveur Minecraft. Tout se fait dans le navigateur.
Créé par Luca Stanek
Sélecteur de couleurs
Convertis les couleurs en temps réel entre HEX, RGB, HSL, HSV et CMYK, trouve la couleur CSS nommée la plus proche et vérifie le contraste WCAG avec le noir et le blanc, le tout dans ton navigateur.
Créé par Justin Schuessler
Vérificateur de contraste
Calcule en direct le rapport de contraste WCAG entre deux couleurs et vérifie les critères AA/AAA ainsi que les composants d’interface, entièrement dans le navigateur.
Créé par Justin Schuessler
Générateur de palettes de couleurs
Génère en direct des palettes complémentaires, analogues, triadiques et autres à partir d’une couleur de base : rien n’est enregistré ni transmis.
Créé par Justin Schuessler
Générateur de favicons
Génère un ensemble complet de favicons à partir de n’importe quelle image : favicon.ico, icône Apple Touch, icônes Android Chrome, site.webmanifest et extrait HTML prêt à copier, entièrement dans ton navigateur.
Créé par Jakub Martyniak
FAQ
Questions fréquentes
Des réponses courtes sur la propriété CSS cursor et cet outil.
36 mots-clés répartis en six groupes : Général (auto, default, none), Liens et états (pointer, help, context-menu, progress, wait), Sélection (text, vertical-text, cell, crosshair), Glisser-déposer (grab, grabbing, move, copy, alias, no-drop, not-allowed), 14 curseurs de redimensionnement et Défilement et zoom (all-scroll, zoom-in, zoom-out). Tu peux aussi utiliser tes propres images avec url().
pointer convient à tout élément qui déclenche une action au clic : liens, boutons, cartes ou icônes cliquables. Les liens affichent déjà une main par défaut, mais ce n’est pas le cas des boutons dans de nombreux navigateurs. N’utilise pas pointer sur du texte ou des zones sans fonction. cursor: hand est une ancienne valeur non standard des premières versions d’Internet Explorer : elle ne figure donc pas parmi les 36 valeurs de l’outil. Pour afficher une main, utilise cursor: pointer;.
Définis cursor: auto sur l’élément pour laisser le navigateur choisir, ou cursor: default pour afficher la flèche normale. Comme cursor est une propriété héritée, tu peux remplacer un pointer défini sur l’élément parent directement sur l’élément enfant. Les deux valeurs figurent dans le groupe « Général » de l’outil.
cursor: not-allowed affiche un cercle barré. Si tu ajoutes aussi pointer-events: none à un bouton désactivé, ce curseur n’apparaît plus, car l’élément ignore alors la souris. Dans la zone de test, tu peux voir le bouton avec not-allowed.
grab affiche une main ouverte sur un élément déplaçable, grabbing une main fermée pendant le déplacement. move affiche une croix fléchée et convient aux éléments que l’on peut déplacer librement, comme les fenêtres ou les widgets.
progress affiche une flèche avec un symbole de chargement : une opération est en cours en arrière-plan, mais la page reste utilisable. wait affiche uniquement le symbole de chargement et indique que l’interface est bloquée. Pour la plupart des chargements sur le Web, progress convient mieux.
Avec cursor: url(cursor.svg) 2 30, crosshair;, tu indiques une image et, éventuellement, son point actif, puis toujours un mot-clé de remplacement. Les navigateurs n’affichent les curseurs personnalisés que jusqu’à 128 × 128 pixels. Cet outil présente les 36 valeurs standard ; tu ne peux pas y importer tes propres images.
CSS définit uniquement le curseur à afficher. Son apparence dépend du système d’exploitation et du navigateur : elle varie donc entre macOS, Windows et Linux. Les appareils tactiles n’ont pas de pointeur de souris : l’outil y affiche une liste avec des descriptions et des boutons de copie. Tout fonctionne dans le navigateur, sans envoi de fichiers.
D’autres questions ?
Contacter le supportTon site a besoin d’un hébergement fiable
Un VPS ZAP-Hosting met ton site en ligne de manière fiable.
Sans configuration. Sans risque. En ligne en quelques secondes.
Tu cherches d’autres outils ? Voir tous les outils de développement
Source préférée sur Google
