Limited supportUseful as a supporting cue, but never the only signal that something is interactive or unavailable.
Interaction Limited support

Cursor styles

cursor changes the pointer appearance over an element. It helps communicate affordance, state, and expected interaction when used consistently.

InteractionPointersAffordance

Overview

cursor changes the pointer appearance over an element. It helps communicate affordance, state, and expected interaction when used consistently.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
cursor
1
12
1
1.2
18
13.4
alias
1
12
1.5
3
18
all-scroll
1
12
1.5
3
18
auto
1
12
1
1.2
18
13.4
cell
1
12
1.5
3
18
13.4
col-resize
1
12
1.5
3
18
context-menu
1
12
1.5
3
18
copy
1
12
1.5
3
18
crosshair
1
12
1
1.2
18
default
1
12
1
1.2
18
e-resize
1
12
1
1.2
18
ew-resize
1
12
1.5
3
18
grab

Grab cursors (`grab` and `grabbing`)
68
14
27
11
68
grabbing
68
79
27
11
68
help
1
12
1
1.2
18
move
1
12
1
1.2
18
n-resize
1
12
1
1.2
18
ne-resize
1
12
1
1.2
18
nesw-resize
1
12
1.5
3
18
no-drop
1
12
1.5
3
18
none
5
12
3
5
18
not-allowed
1
12
1.5
3
18
ns-resize
1
12
1.5
3
18
nw-resize
1
12
1
1.2
18
nwse-resize
1
12
1.5
3
18
pointer
1
12
1
1.2
18
progress
1
12
1
1.2
18
row-resize
1
12
1.5
3
18
s-resize
1
12
1
1.2
18
se-resize
1
12
1
1.2
18
sw-resize
1
12
1
1.2
18
text
1
12
1
1.2
18
13.4
url

`url()`
1
12
1.5
3
18
13.4
url positioning syntax

`url()` positioning syntax
1
79
1.5
3
18
vertical-text
1
12
1.5
3
18
w-resize
1
12
1
1.2
18
wait
1
12
1
1.2
18
zoom-in
37
12
24
9
37
zoom-out
37
12
24
9
37
Other
svg.global_attributes.cursor

The cursor attribute specifies the mouse cursor displayed when the mouse pointer is over an element.
1
12
1
1.2
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Starting in Firefox 67, the maximum size allowed for custom cursors is 32x32 pixels due to cursors being misused by certain malicious sites.
Notes 2 item(s)
Implementation note
  • This property is only supported on iPads with an external pointing device.
  • Unsupported values use the `default` pointer as a fallback.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • This cursor is only supported on macOS and Linux.
Notes 1 item(s)
Implementation note
  • This cursor is only supported on macOS and Linux.
Notes 1 item(s)
Implementation note
  • This cursor is only supported on macOS and Linux.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 3 item(s)
Compatibility
  • Chrome also continues to support the prefixed versions.
  • Available with a vendor prefix: -webkit- (1)
Implementation note
  • Chrome 22 added Windows support.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (4)
Notes 3 item(s)
Compatibility
  • Chrome Android also continues to support the prefixed versions.
  • Available with a vendor prefix: -webkit- (18)
Implementation note
  • Chrome Android 25 added Windows support.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Implementation note
  • Chrome 22 added Windows support.
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Implementation note
  • Edge 79 added Windows support.
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Implementation note
  • Chrome Android 25 added Windows support.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • Firefox 4 added macOS support.
Notes 1 item(s)
Implementation note
  • Firefox 4 added macOS support.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Implementation note
  • If this value is used, the iPad will display the `default` pointer instead.
Notes 1 item(s)
Implementation note
  • Starting in Firefox 67, the maximum size allowed for custom cursors is 32x32 pixels due to cursors being misused by certain malicious sites.

Syntax

CSS 
.clickable { cursor: pointer; }
.draggable { cursor: grab; }
.dragging { cursor: grabbing; }
.disabled { cursor: not-allowed; }

Live demo

pointer / grab

CSS Pointer / grab demo.

PreviewFullscreen

not-allowed / wait

CSS Not-allowed / wait demo.

PreviewFullscreen

crosshair / text

CSS Crosshair / text demo.

PreviewFullscreen

Use cases

  • Affordance hints

    Reinforce clickable, draggable, or zoomable behavior with the expected pointer style.

  • Unavailable actions

    Support disabled or blocked states with a pointer cue that matches the visual styling.

Cautions

  • Cursor styling alone does not create semantics or behavior, so it should not replace real interactive elements.
  • Exotic custom cursors can harm clarity and feel gimmicky if overused.

Accessibility

  • Some users never see pointer changes, so interaction cues must also be visible in text, shape, and state styling.

Related links

Powered by web-features