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 IE8b2 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
all-scroll
Microsoft 		No Yes Yes Yes No No
col-resize
Microsoft 		No Yes Yes Yes No No
crosshair
W3C 		Yes Yes Yes Yes Yes
default
W3C 		Yes Yes Yes Yes Yes
hand
Microsoft 		Yes No No Yes No

See the note below.
help
W3C 		Yes Yes Yes Yes Yes
move
W3C 		Yes Yes Yes Yes Yes
Selector IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
no-drop
Microsoft 		No Yes Yes Yes No No
not-allowed
Microsoft 		No Yes Yes Yes No No
pointer
W3C 		No Yes Yes Yes Yes Yes

See the note below.
progress
W3C 		No Yes Yes Yes Yes Yes
row-resize
Microsoft 		No Yes Yes Yes No No
text
W3C 		Yes Yes Yes Yes Yes
Selector IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
url
Microsoft 		No Yes Yes No No

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

  1. IE expects a .cur file.
  2. Firefox requires a second, non-URL value; like cursor: url(pix/cursor_ppk.gif), auto.
  3. The maximum 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:

vertical-text
Microsoft 		No Yes Yes No Yes No No
wait
W3C 		Yes Yes Yes Yes Yes
*-resize
W3C 		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 IE8b2 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7

Note on pointer and hand

In the past the hand value was Microsoft's way of saying pointer; and Explorer 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 Explorer 6 and 7 support pointer, there's no more reason to use hand, except when older Explorers 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.