Interactivity
cursor
Setting the mouse cursor style.
Overview
| Class | Declarations |
|---|---|
cursor:none | cursor: none;
|
cursor:auto | cursor: auto;
|
cursor:default | cursor: default;
|
cursor:pointer | cursor: pointer;
|
cursor:text | cursor: text;
|
cursor:move | cursor: move;
|
cursor:vertical-text | cursor: vertical-text;
|
cursor:alias | cursor: alias;
|
cursor:all-scroll | cursor: all-scroll;
|
cursor:cell | cursor: cell;
|
cursor:col-resize | cursor: col-resize;
|
cursor:row-resize | cursor: row-resize;
|
cursor:context-menu | cursor: context-menu;
|
cursor:copy | cursor: copy;
|
cursor:crosshair | cursor: crosshair;
|
cursor:grab | cursor: grab;
|
cursor:grabbing | cursor: grabbing;
|
cursor:n-resize | cursor: n-resize;
|
cursor:e-resize | cursor: e-resize;
|
cursor:s-resize | cursor: s-resize;
|
cursor:w-resize | cursor: w-resize;
|
cursor:ne-resize | cursor: ne-resize;
|
cursor:nw-resize | cursor: nw-resize;
|
cursor:se-resize | cursor: se-resize;
|
cursor:sw-resize | cursor: sw-resize;
|
cursor:ew-resize | cursor: ew-resize;
|
cursor:ns-resize | cursor: ns-resize;
|
cursor:nesw-resize | cursor: nesw-resize;
|
cursor:nwse-resize | cursor: nwse-resize;
|
cursor:no-drop | cursor: no-drop;
|
cursor:not-allowed | cursor: not-allowed;
|
cursor:progress | cursor: progress;
|
cursor:wait | cursor: wait;
|
cursor:zoom-in | cursor: zoom-in;
|
cursor:zoom-out | cursor: zoom-out;
|
cursor:<value> | cursor: <value>;
|
Examples
Show clickable affordance
Use cursor:pointer for custom controls that are not native buttons or links.
<div role="button" tabindex="0" class="cursor:pointer"> Open menu</div>Generated CSS
@layer utilities { .cursor\:pointer { cursor: pointer }}Mark disabled actions
Use cursor:not-allowed with a real disabled state or equivalent accessibility attributes.
<button disabled class="cursor:not-allowed opacity:.5"> Unavailable</button>Support drag handles
Use cursor:grab and cursor:grabbing to make draggable handles clearer.
<button class="cursor:grab cursor:grabbing:active"> Move</button>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="cursor:pointer:hover cursor:default@sm cursor:auto@print">...</div>