La propriété cursor
permet de modifier l’apparence du curseur de la souris lorsqu’il survole un élément HTML. Elle est utile pour indiquer à l’utilisateur qu’un élément est cliquable, qu’une action est possible ou simplement pour améliorer l’ergonomie.
Il existe une large gamme de valeurs prédéfinies pour adapter le curseur à chaque situation : lien, déplacement, chargement, aide, saisie de texte, etc.
1. cursor: pointer;
— Curseur de lien cliquable
Utilisé pour indiquer qu’un élément est interactif, comme un bouton ou un lien.
.cursor-pointer {
cursor: pointer;
}
2. cursor: default;
— Curseur normal
Affiche le curseur par défaut du système. C’est souvent la flèche classique.
.cursor-default {
cursor: default;
}
3. cursor: text;
— Curseur de saisie (barre verticale)
Utilisé pour indiquer qu’un champ est éditable, comme une zone de texte ou un champ de formulaire.
.cursor-text {
cursor: text;
}
4. cursor: move;
— Curseur de déplacement
Indique que l’élément peut être déplacé, glissé ou réorganisé.
.cursor-move {
cursor: move;
}
5. cursor: not-allowed;
— Action non autorisée
Utilisé pour signaler qu’une action est désactivée ou impossible.
.cursor-not-allowed {
cursor: not-allowed;
}
6. cursor: help;
— Curseur d’aide
Affiche un point d’interrogation ou une icône d’aide selon le système. Idéal pour des éléments informatifs ou contextuels.
.cursor-help {
cursor: help;
}
7. cursor: wait;
— Curseur de chargement
Indique qu’un traitement est en cours. Affiche généralement une icône d’attente (sablier ou cercle).
.cursor-wait {
cursor: wait;
}
Résumé des curseurs utiles
- pointer : main pour les éléments cliquables
- text : champ de saisie
- move : déplacement possible
- not-allowed : action désactivée
- help : besoin d’information
- wait : en cours de chargement
Tu peux également utiliser des curseurs personnalisés avec l’URL d’une image : cursor: url('mon-curseur.png'), auto;
Conclusion
La propriété cursor
est idéale pour rendre ton site plus intuitif. Elle donne des indices visuels à l’utilisateur sans JavaScript et améliore l’ergonomie générale.