Cursor styles

Back to the index.

This page has been translated into Italian.

By changing the value of the cursor declaration you can assign cursor styles to various HTML elements. Although in theory this is great functionality, it's very easy to confuse your users by defining inappropriate cursor styles. Please be very careful; in general the browser defaults work fine, and besides they're what the user expects.

The leftmost cells of the compatibility table have the indicated cursor value. See also the W3C and Microsoft references.

Selector IE5.5 IE6 IE7 IE8 IE9 IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5 Mac Opera 12.14 Win Opera 12.14 Mac
alias
No Yes Yes Yes Yes Yes
all-scroll
No Yes Yes Yes Yes Yes
cell
No Yes Yes Yes Yes Yes
col-resize
No Yes Yes Yes Yes Yes
context-menu
No Yes No Yes Yes No Yes Yes
copy
No Yes Yes Yes Yes Yes
crosshair
Yes Yes Yes Yes Yes
default
Yes Yes Yes Yes Yes
hand
Yes No No No No No

See the note below.

Selector IE5.5 IE6 IE7 IE8 IE9 IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5 Mac Opera 12.14 Win Opera 12.14 Mac
help
Yes Yes Yes Yes Yes
move
Yes Yes Yes Yes Yes
no-drop
No Yes Yes Yes Yes Yes
  • This value crashes Safari Windows.
not-allowed
No Yes Yes Yes Yes Yes
pointer
No Yes Yes Yes Yes Yes

See the note below.

progress
No Yes Yes Yes Yes Yes
Selector IE5.5 IE6 IE7 IE8 IE9 IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5 Mac Opera 12.14 Win Opera 12.14 Mac
row-resize
No Yes Yes Yes Yes Yes
text
Yes Yes Yes Yes Yes
url
No Yes Yes Yes No

Use a gif image as cursor:

Syntax: cursor: url(../pix/cursor_ppk.gif),auto.

url
Yes Yes Yes Yes No

Use a cur image as cursor:

Syntax: cursor: url(../pix/cursor_ppk.cur),auto.

I have heard, but did not test, that the cursor’s URL must be relative to the page, and not to the style sheet, in IE at least up to 9.

vertical-text
No Yes Yes Yes Yes Yes
wait
Yes Yes Yes Yes Yes
*-resize
Yes Yes Yes Yes Yes

The example is 'N-resize'. Instead of the 'N' you can also use 'NW', 'W', 'SW', 'S', 'SE', 'E', 'NE'

zoom-in
No No No No Yes
zoom-out
No No No No Yes
Selector IE5.5 IE6 IE7 IE8 IE9 IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5 Mac Opera 12.14 Win Opera 12.14 Mac

Note on pointer and hand

In the past the hand value was Microsoft's way of saying pointer; and IE 5.0 and 5.5 only support hand. Because it's the cursor value that's used most often, most other browsers have also implemented hand.

Since IE 6 and 7 support pointer, there's no more reason to use hand, except when older IEs are part of your target audience. In that case, the only cross-browser syntax is:

element {
	cursor: pointer;
	cursor: hand;
}

Note that the two declarations must be in this order.