Using CSS, there are many built-in cursor styles you use, from the waiting hour glass to directional pointers. Also, in Internet Explorer 6, you can use custom cursors by uploading custom cursor files (.cur) to your Web site and then referencing them via CSS. Also, you probably have hundreds of cursors on your computer you could upload and use. Just remember Google's motto, "Don't Be Evil." Custom cursors can be extremely annoying to users, no matter how fun they might seem. Used appropriately, though, CSS cursors can add a lot of usability to the user experience.

CSS Cursor Property and Values

You can set the cursor to a number of styles by using an HTML element's style attribute to set the cursor property. Mouseover the following example to see various cursor styles applied using CSS.

Example CSS Cursors

crosshair cursor | wait cursor | help cursor

CSS and HTML Code from Example

 
<p style="color:red;">
<span style="cursor:crosshair;">crosshair cursor</span>
| <span style="cursor:wait;">wait cursor</span>
| <span style="cursor:help;">help cursor</span>
</p>

CSS Cursors

Mouse over each table row to see your mouse cursor style change.

CSS2.1 Cursor Styles

Cursor	Value	Description
For more information, see Cursor Property Section of the CSS2.1 Spec.
	auto	The UA determines the cursor to display based on the current context.
	col-resize	Indicates the item or column can be resized horizontally.
	crosshair	A simple crosshair (e.g., short line segments resembling a "+" sign).
	default	The platform-dependent default cursor. Often rendered as an arrow.
	help	Help is available for the object under the cursor. Often rendered as a question mark or a balloon.
	move	Indicates something is to be moved.
	not-allowed	Indicates that the requested action will not be carried out.
	pointer	The cursor is a pointer that indicates a link.
	row-resize	Indicates the item or row can be resized vertically.
	text	Indicates text that may be selected. Often rendered as an I-beam.
	vertical-text	Indicates editable vertical text.
	wait	the hourglass (non-animated, sadly)
	e-resize	Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.
	n-resize
	ne-resize
	nw-resize
	w-resize
	s-resize
	se-resize
	sw-resize

Applying Custom Cursors with CSS - IE 6 Only

In addition the the 16 predefined cursors, you can use custom cursors in CSS via the URL type. Mouse over the following example.

 
<style type="text/css">
.hibeam {cursor:url(/cursors/hibeam.cur);}
</style>
<div style="color:red;">
<p class="hibeam">
Custom cursor added via CSS.
</p>
</div>

What is a Cursor File?

In addition to using CSS, to use a customer cursor, the custom cursor file must be available to download to the user's Web browser. So you must upload your cursor file to your Web server.

A cursor file is similar to an icon, but it is used as an icon for your mouse pointer. A cursor file has a file extension of .cur. If you search your Windows machine for files ending with .cur, you find that you already have many cursors installed that you could upload to your Web site and use. When I searched my mahcine, I found 302 cursor files.

Best Practices

Once I went to a site that used pink flamigo for the customer cursor. I had to point with it's beak. Funny now; irritating then. A custom cursor should not be gratuitous. It should serve a definite purpose to make your site more user friendly, not less. I've seen several cases of very poor choices, believed to be humorous, for custom cursors.

Since custom cursors can be so irritating, and since they are only supported in Internet Explorer, a best practice would be to not use them in most cases and use one of the predefined CSS cursor styles, which are designed well and recognizable.

As long as you use as they were designed to be used, using CSS cursors could give your users valuable feedback about during user interaction. A great example is a progress bar written in JavaScript: changing the cursor style to wait is a best practice your users would appreciate.