6XC

Sélecteur de curseur CSS

Survolez chaque valeur de curseur CSS pour la tester en direct, cliquez pour copier la déclaration cursor.

989 vues

Survolez pour tester · Cliquez pour copier

La propriété cursor

Le curseur indique aux utilisateurs ce que fait un élément avant qu'ils ne cliquent : pointer pour les éléments cliquables, grab pour les éléments déplaçables, not-allowed pour les zones désactivées, col-resize/row-resize pour les panneaux redimensionnables. Survolez chaque tuile ci-dessous pour ressentir le curseur sur votre propre écran ; cliquer copie la déclaration prête à l'emploi. Des images personnalisées sont aussi possibles avec cursor: url(...), repli.

Questions fréquentes

Pourquoi mon curseur personnalisé ne s'affiche-t-il pas ?

Les images de curseur personnalisées doivent être petites (32×32 ou moins sur la plupart des plateformes) et la déclaration exige un mot-clé de repli : cursor: url("c.png"), auto;.

Les boutons doivent-ils utiliser cursor: pointer ?

Les navigateurs ne l'appliquent pas par défaut à <button>, mais les utilisateurs s'y attendent — la plupart des systèmes de design ajoutent cursor: pointer à tous les contrôles interactifs.

Outils similaires

Générateur de dégradé CSS Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code. Lancer Générateur d'ombre CSS (box-shadow) Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer