cursor

cursor chooses the pointer image over a box. It communicates an existing behavior; it does not add clicking, dragging, resizing, or a disabled state.

Compare pointer and text cursors

Hover the working button and the selectable paragraph with a mouse. The button’s pointer hints at activation; the paragraph’s text cursor hints at selection.

<button type="button" onclick="this.textContent='Activated'">
  Activate example
</button>
<p>Try selecting this text.</p>

button {
  cursor: pointer;
  min-height: 44px;
  padding: 0.75rem;
}
p {
  cursor: text;
}

Match a disabled control’s real state

The disabled attribute prevents activation of this button. The cursor reinforces the state on platforms that show it; a visible explanation remains available without hover.

<button type="button" disabled aria-describedby="reason">Publish</button>
<p id="reason">Publishing becomes available after the required review.</p>

button {
  min-height: 44px;
  padding: 0.75rem;
}
button:disabled {
  cursor: not-allowed;
}

Values and defaults

The initial value is auto and cursor is inherited. Auto lets the browser choose from context; default requests the platform’s usual arrow. Text, pointer, grab/grabbing, resize cursors, progress, and wait describe different interactions. Choose only the behavior the interface actually implements.

Custom cursor images use url() followed by a required keyword fallback. Optional hotspot coordinates identify the active image pixel. Browsers limit supported image formats and dimensions; oversized or unavailable images fall back to the keyword.

Common mistakes

Cursor:pointer on a div does not provide button semantics, keyboard activation, or an accessible name. Cursor:not-allowed does not disable a control. Touch users may never see a hover cursor, and pointer appearance can differ by platform.

Use a native button for actions and an a element for navigation. Learn pointer-events to distinguish targeting from cursor appearance.

Sources and browser support

MDN: cursor describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.