Pointer Sisters: Changing The Browser’s Cursor with CSS

While the browser will automatically change the appearance of the cursor in the context of many UI elements – switching it to a pointing hand when over links, for example – there are occasions when you’ll want to change it manually for particular operations: a compass cursor to indicate that an element may be moved, for example. This is commonly achieved through CSS; in particular, the cursor property for an element.

Be Careful Where You Point

It’s very important to note that you should never change the cursor “just because”. The cursor is the primary method visitor’s use to interact with your site; altering it just because you can ruins user’s UI expectations, leading to frustration and abandonment. If you set the cursor property, it should always be appropriate to the task at hand, and within the user’s expectations.

cursor is usually set on a particular element, often on :hover or similar state: for example, in one of my before-and-after image comparators:

 div#inked-painted:hover {
	cursor: col-resize;
}

There are a wide range of cursors available in browsers. Cursors will appear different between different operating systems; the only way to make them completely consistent is to make and use your own cursor image (for that, see the guide at the end of this article).

In the table below, cursors are shown by hovering over its name, to the left.

Value	Meaning
default	The default cursor; usually a pointer	auto	The cursor will as whatever is appropriate in the current browser context. Note that appearance will not always be exactly what you want, or what you think is appropriate.	none	No cursor is rendered. Be particularly careful with this one, as it can really confuse users if not handled very carefully.	context-menu	A contextual menu is available.	help	Help is available with this option	pointer	Associated with hovering over a link; typically appears as a pointing hand	progress	The web application or site is busy in the background, but can still be interacted with. Don’t confuse this with the <progress> element. Often the same display as wait (see below).	wait	The application is busy (typically shown as a spinning ball or a working watch).	cell	Indicates that table cells can be selected.	crosshair	Cross cursor, often used to indicate selection on a bitmap.	text	Horizontal text can be selected.	vertical-text	Vertical text is available for selection.	alias	An alias, shortcut, or symlink is to be created.	copy	Some content can be copied.	move	The element may be moved.	no-drop	An element may not be dropped in this location. (Often the same appearance as not-allowed – see below).	not-allowed	Something cannot be done at this location.	all-scroll	The element can be scrolled or panned in any direction.	col-resize	The element or column can be resized horizontally.	row-resize	The element or row can be resized vertically.	n-resize	The element can be resized, but only upwards.	e-resize	The element can be resized, but only to the right.	w-resize	The element can only be expanded to the left.	s-resize	The element can only be expanded downwards.	ne-resize	The upper right corner of an element can be dragged outwards.	nw-resize	The upper left corner of an element can be dragged outwards.	se-resize	The lower right corner of an element can be dragged outwards.	sw-resize	The lower left corner of an element can be dragged outwards.	ew-resize	The element may be resized horizontally.	ns-resize	The element may be resized vertically.	nesw-resize	The element may be resized diagonally, in the directions indicated.	nwse-resize	The element may be resized diagonally, in the directions indicated.	zoom-in	Indicates that something may be zoomed or magnified. No support in IE.	zoom-out	Indicates that something may be zoomed out. No support in IE.	grab	An element can be grabbed. No support in IE; other browsers require vendor prefixes before the value(cursor: -webkit-grab, etc).	grabbing	The element is currently grabbed. No support in IE; as with the previous example, requires vendor prefixes.

Again, a cursor value by itself does not prevent other actions: a nesw-resize can still select text by default, for example.

Custom cursors

It’s also possible to set the cursor to a defined image, much as background images are set. There are a few problems with this:

• Internet Explorer only supports the .cur and .ani files for the cursor; all other browsers support PNG, which (due to its support for alpha transparency) is recommended.
• All browsers support setting the “hotpoint” of the cursor – the active or “pointing” part of the cursor, except for IE. These x and y coordinates are ignored in IE.

Custom cursors need to be designed as carefully as favicons; since they will be seen against both dark and light backgrounds, they must be drawn to work on both, such as the following:

To use a custom cursor, a default and fallback must be provided for browsers such as IE:

canvas {
    cursor:  crosshair;
    cursor: url(circular-cursor.png) 53 53, crosshair;
}

In this case, the 53 53 represents the pointer of the cursor – it’s center, in this case – used in my “Scratch” Reveal with HTML5 canvas: 53 pixels from the left and top of the PNG file.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.