The Cursor Property

The last property of the chapter is cursor. It does not affect space inside boxes, but it describes box-centric behavior: what type of cursor to use when the pointer is inside a box.

Name:	cursor
Value:	[[<url> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress]]
Initial:	auto
Applies to:	all elements
Inherited:	yes
Percentages:	N/A

The values of the property are described here along with suggested cursor images:

	crosshair	A simple crosshair (e.g., short line segments resembling a plus sign).
	default	The platform-dependent default cursor. Often rendered as an arrow.
	pointer	The cursor is a pointer that indicates a link.
	move	Indicates something is to be moved.
	e-resize	Indicates that the eastern edge is to be moved.
	ne-resize	Indicates that the north-eastern edge is to be moved.
	nw-resize	Indicates that the north-western edge is to be moved.
	n-resize	Indicates that the northern edge is to be moved.
	se-resize	Indicates that the south-eastern edge is to be moved.
	sw-resize	Indicates that the south-western edge is to be moved.
	s-resize	Indicates that the southern edge is to be moved.
	w-resize	Indicates that the western edge is to be moved.
	text	Indicates text that may be selected.
	wait	Indicates that the program is busy and the user should wait.
	help	The program is performing some processing, but the user may still interact with the program.

The initial value of the property is auto, which lets the browser choose which cursor to use. Also, a URL pointing to an external cursor can be specified.

The property accepts a comma-separated list of values. For example, to change the cursor inside BLOCKQUOTE elements, you can use this code:

 blockquote {   cursor: url(http://www.example.com/text.ico), text } 

If a browser does not support downloadable cursor, the predefined text cursor will be used.