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>;
|
cursor requests a pointer shape over an element. The operating system and input device determine its appearance; a shape does not create an action or disable a control.
Examples
Show clickable affordance
Use cursor:pointer on a real disclosure control. Click or press Enter on the summary to reveal its setting.
<details> <summary id="target" class="p-sm b:1px|solid|var(--color-line-base) r-sm cursor:pointer">Canvas settings</summary> <label class="flex items-center gap-sm mt-md"> <input type="checkbox"> Show grid </label></details>Generated CSS
@layer utilities { .cursor\:pointer { cursor: pointer }}The native summary already supplies focus, keyboard activation and expanded state. A div with a pointer cursor would not provide those behaviors.
Mark disabled actions
Pair cursor:not-allowed with the native disabled attribute. The cursor is a visual cue; disabled is what prevents the reset action.
<form class="grid justify-items:start gap-md"> <label class="grid gap-xs w:240px max-w:100%"> Project name <input type="text" value="Canvas" class="w:100%"> </label> <button id="target" type="reset" disabled class="opacity:.6 cursor:not-allowed"> Reset unavailable </button> <button type="reset">Reset name</button></form>Edit the name first, then compare the disabled button with the enabled reset. aria-disabled alone would not prevent activation; a custom control must implement that behavior.
Support drag handles
Use cursor:grab with cursor:grabbing:active on content that really participates in native dragging. This image has draggable="true".
<img id="target" src="/demo/landscape.svg" alt="Sun above layered mountains" width="240" height="144" class="block h:auto w:240px max-w:100% r-sm cursor:grab cursor:grabbing:active" draggable="true"><p class="mb:0 mt-sm font-xs text-muted">Drag the image, or <a href="/demo/landscape.svg" download>download the artwork</a>.</p>The grabbing style applies while the element is active. Once native dragging begins, the operating system may show its own drag feedback. These classes do not implement reordering or a drop target.
Apply conditionally
Resize to request cursor:pointer at sm and cursor:default below it. The disclosure opens with the mouse or keyboard at either width.
<details> <summary id="target" class="p-sm b:1px|solid|var(--color-line-base) r-sm cursor:default cursor:auto@print cursor:pointer@screen@sm">Canvas settings</summary> <label class="flex items-center gap-sm mt-md"> <input type="checkbox"> Show grid </label></details>Hover with a pointing device to inspect the native cursor. Touch devices may show no cursor even though the computed value changes.