Cursor styles

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 IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
all-scroll
Microsoft 		No Yes Yes Yes Yes No No
col-resize
Microsoft 		No Yes Yes Yes Yes No No
crosshair
W3C 		Yes Yes Yes Yes Yes Yes
default
W3C 		Yes Yes Yes Yes Yes Yes
hand
Microsoft 		Yes No No No Yes No

See the note below.
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
help
W3C 		Yes Yes Yes Yes Yes Yes
move
W3C 		Yes Yes Yes Yes Yes Yes
no-drop
Microsoft 		No Yes Yes Yes Yes No No
not-allowed
Microsoft 		No Yes Yes Yes Yes No No
pointer
W3C 		No Yes Yes Yes Yes Yes Yes

See the note below.
progress
W3C 		No Yes Yes Yes Yes Yes Yes
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
row-resize
Microsoft 		No Yes Yes Yes Yes No No
text
W3C 		Yes Yes Yes Yes Yes Yes
url
Microsoft 		Alternative Yes Yes Yes No No

Use an image as cursor. This value has a few problems:

  1. IE expects a .cur file. I have no idea how to create one, so this test doesn’t work in IE.
  2. Firefox requires a second, non-URL value; like cursor: url(pix/cursor_ppk.gif), auto.
  3. The size of the image must be 32x32 pixels or lower. This is a (Windows) OS restriction; not a browser restriction.

This test uses the following .gif image:

  • The test image shows up garbled in Chrome.
vertical-text
Microsoft 		No Yes Yes No Yes Yes No No
wait
W3C 		Yes Yes Yes Yes Yes Yes
*-resize
W3C 		Yes 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'
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7

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.