Curseur - Astuces CSS | CSS Almanach 2025

La cursorpropriété en CSS contrôle à quoi ressemblera le curseur de la souris lorsqu'il se trouve sur l'élément dans lequel cette propriété est définie. De toute évidence, cela n'est pertinent que dans les navigateurs / systèmes d'exploitation dans lesquels il y a une souris et un curseur. Ils sont essentiellement utilisés pour l'UX pour véhiculer l'idée de certaines fonctionnalités. Alors essayez de ne pas briser cette offre.

Il y en a plusieurs:

.auto ( cursor: auto; ) .default ( cursor: default; ) .none ( cursor: none; ) .context-menu ( cursor: context-menu; ) .help ( cursor: help; ) .pointer ( cursor: pointer; ) .progress ( cursor: progress; ) .wait ( cursor: wait; ) .cell ( cursor: cell; ) .crosshair ( cursor: crosshair; ) .text ( cursor: text; ) .vertical-text ( cursor: vertical-text; ) .alias ( cursor: alias; ) .copy ( cursor: copy; ) .move ( cursor: move; ) .no-drop ( cursor: no-drop; ) .not-allowed ( cursor: not-allowed; ) .all-scroll ( cursor: all-scroll; ) .col-resize ( cursor: col-resize; ) .row-resize ( cursor: row-resize; ) .n-resize ( cursor: n-resize; ) .e-resize ( cursor: e-resize; ) .s-resize ( cursor: s-resize; ) .w-resize ( cursor: w-resize; ) .ns-resize ( cursor: ns-resize; ) .ew-resize ( cursor: ew-resize; ) .ne-resize ( cursor: ne-resize; ) .nw-resize ( cursor: nw-resize; ) .se-resize ( cursor: se-resize; ) .sw-resize ( cursor: sw-resize; ) .nesw-resize ( cursor: nesw-resize; ) .nwse-resize ( cursor: nwse-resize; )

Le curseur peut également être une image:

.custom ( cursor: url(images/my-cursor.png.webp), auto; )

Certains curseurs WebKit uniquement:

-webkit-zoom-in -webkit-zoom-out -webkit-zoom-grab -webkit-zoom-grabbing

Plus d'information

Module d'interface utilisateur de base CSS niveau 3
Documents Mozilla

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome	Firefox	C'EST À DIRE	Bord	Safari
5	4	9	14	5

Mobile / tablette

Chrome Android	Android Firefox	Android	Safari sur iOS
88	Non	81	Non

Et pour les nouvelles valeurs, comme zoom-inet zoom-out:

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.