CSS Properties/Page Styles/changing mouse cursor shapes

cursor: ***;

Browser

The cursor property changes mouse cursor shapes.

#example { cursor: wait; }

The values for the cursor property

(Move the mouse over the "Example" text)

Property	Value	Example
cursor
	auto	Example
	default	Example
	pointer	Example
	crosshair	Example
	move	Example
	text	Example
	wait	Example
	help	Example
	n-resize	Example
	e-resize	Example
	s-resize	Example
	w-resize	Example
	ne-resize	Example
	se-resize	Example
	sw-resize	Example
	nw-resize	Example
	Custom cursor
	url(***.cur)	Example
	Extension
	col-resize	Example
	row-resize	Example
	all-scroll	Example
	not-allowed	Example
	no-drop	Example
	progress	Example
	vertical-text	Example

The default is "auto".

About custom cursor (MSIE 6+)

The custom cursor file can be specified by using the "url()" option.

[Move the mouse over this text]

Example of specifying "example.cur".
cursor: url(example.cur);

A comma-separated list of cursor values

In the following example, when the custom cursor cannot be used in the user's computer, "text" is applied.
cursor: url(example.cur), text;

In the following example, when "example.cur" cannot be used in the user's computer, "example.gif" is used.
cursor: url(example.cur), url(example.gif), text;

Tips and Notes

The change of the cursor is not so liked.

Example

<html>
<head>
<title>TAG index</title>

<style type="text/css">

#example1 { cursor: wait; }
#example2 { cursor: help; }
#example3 { cursor: url(image/example.cur), default; }

</style>

</head>
<body>

<p><span id="example1">Please wait for a while</span></p>

<p><a href="index.html" id="example2">Help</a></p>

<p><img src="image/face.gif" alt="Face" width="75" height="78" id="example3"></p>

</body>
</html>

Output

Please wait for a while

Help

Face