CSS cursor Properties (different cursors)

CSS Reference Manuals

Instance

Some of the different cursors:

Span.crosshair { cursor:crosshair; }span.help { cursor:help; }span.wait { cursor:wait; }

Try it yourself.

Browser support

IE	Firefox	Chrome	Safari	Opera

Cursor properties are supported by all major browsers.

Note: The URL value is not supported for Opera 9.3 and Safari 3.

Note: The property value "Inherit" is not supported by any version of Internet Explorer, including IE8.

Definition and usage

The cursor property specifies the type (shape) of cursors to display.

This property defines the cursor shape used when the mouse pointer is placed within the bounds of an element (although CSS2.1 does not define which boundary determines the range).

Default value:	Auto
Inheritance:	Yes
Version:	CSS2
JavaScript Syntax:	object. style.cursor= "Crosshair"

Possible values

value	Description
wr.	The URL of the custom cursor that you want to use. Note: Always define a normal cursor at the end of this list in case there are no available cursors defined by the URL.
Default	Default cursor (usually an arrow)
Auto	Default. The cursor of the browser settings.
Crosshair	The cursor is rendered as a crosshair.
Pointer	Cursor rendered as a pointer indicating the link (one hand)
Move	This cursor indicates that an object can be moved.
E-resize	This cursor indicates that the edge of the rectangle can be moved to the right (east).
Ne-resize	This cursor indicates that the edge of the rectangle can be moved up and to the right (north/east).
Nw-resize	This cursor indicates that the edge of the rectangle can be moved up and to the left (north/west).
N-resize	This cursor indicates that the edge of the rectangle box can be moved up (north).
Se-resize	This cursor indicates that the edge of the rectangle can be moved down and to the right (south/east).
Sw-resize	This cursor indicates that the edge of the rectangle can be moved down and to the left (south/west).
S-resize	This cursor indicates that the edge of the rectangle can be moved down (south).
W-resize	This cursor indicates that the edge of the rectangle can be moved to the left (west).
Text	This cursor indicates the text.
Wait	This cursor indicates that the program is busy (usually a table or an hourglass).
Help	This cursor indicates the available help (usually a question mark or a balloon).

Tiy instances

Change cursor

This example shows how to change the cursor.

Related pages

CSS Tutorial: CSS Positioning

HTML DOM Reference Manual: Cursor Property

CSS Reference Manuals

CSS cursor Properties (different cursors)