Cursor styles

Not supported by Netscape 4, Opera 6-, iCab and Omniweb.

Safari has very confused support. pointer is reliable, all other styles may show either default or text.

See RichInStyle.com tests: cursor 2 for some more cursor tests.

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.

cursor: auto

Buggy in Mozilla: the link with cursor: auto has a text cursor, not a pointer.

Spec: "The UA determines the cursor to display based on the current context."

This entire paragraph has cursor: auto. This is a link. The cursor should get its normal styles (I-bar over text, pointer over link).

This paragraph and the next one have cursor: crosshair. This link has cursur: auto, though, so it should show a pointer.

This link has no cursor style defined. What cursor should it show? Mozilla, Opera and Explorer Win show the pointer, while Explorer Mac and Safari allow cursor style inheritance, giving it a crosshair style (Safari is being vague in what it shows, but it certainly doesn't show the pointer). This is probably caused by the fact that in the first three browsers an internal style sheet commands this:

a {cursor: pointer;}

while on both Mac browsers the pointer cursor is added in a non-CSS way. My test case doesn't overrule the internal style sheet, but it does overrule the non-CSS method.

cursor: crosshair

This paragraph has cursor: crosshair.

cursor: default

This paragraph has cursor: default. The default cursor is the arrow browsers show when you hover over nothing in particular.

cursor: help

This paragraph has cursor: help.

cursor: move

This paragraph has cursor: move.

cursor: pointer

pointer: Explorer 6 Windows, Mozilla, Opera, Explorer 5 Mac, Safari 1.0+

hand: Explorer 4-6 Windows, Opera, Explorer 5 Mac, Safari 1.2

The cross-browser code does not work in Safari 1.0. 1.2 has no problems.

This paragraph has cursor: pointer. This is the official way to change the cursor to a pointer.

cursor: hand

This paragraph has cursor: hand. This is the Microsoft way to to change the cursor to a pointer.

Cross browser

The only cross browser syntax for a pointer/hand is:

p.pointerhand {
	cursor: pointer;
	cursor: hand;
}

Note that the two declarations must be in this order.

cursor: progress

Explorer 6 Windows and 5 Mac, Opera 7.20.

cursor: progress. This is a new Microsoft extension. There are plenty more, see MSDN for a complete list.

cursor: text

This paragraph has cursor: text.

cursor: wait

This paragraph has cursor: wait.

Please remember that the "wait" symbol is an hourglass on Windows, but a (stop?)watch on Mac. Therefore you shouldn't try to describe the cursor, like "wait until the hourglass disappears". It will throw users of another OS off the mark.