CSS Cursors: An Ultimate Guide

The typical browser will display the mouse pointer over any blank part of a web page, the gloved hand over any item that is linked (click-able) and the edit cursor over any text or text field. With CSS you can redefine those properties to display a variety of different cursors.

You have to be mindful of how you manipulate your cursor. CSS cursors (built-in or custom) should be used as a hint to the user as to know what action the mouse can perform. Let’s take a look at an example that doesn’t use custom cursors to illustrate a common use-case: drag and drop. To give users a visual clue that an item is draggable, a CSS cursor property with move as value should be set. Or a case of a resizeable box, these has to be indicated. Below is a code snippet that change mouse cursor icon to move.

.class {
cursor: move;
}

The built in cursor are nice but you have to know that they may look different depending on users browser/operating system. For example, some browsers (e.g. Firefox on Windows 7) will show the move cursor as a four-pointed arrow () while others (e.g. Firefox on Mac OS X) will show a hand ().
It might be important for you to see exactly how each built-in cursor will appear across browsers and platforms. The images below demonstrate how each cursor appears (thanks to tutsplus for the image):


Windows 7

• IE9
• IE8
• Chrome
• Safari 5.1.7
• Firefox
• Opera

Windows XP

• IE9
• IE8
• Chrome
• Safari 5.1.7
• Firefox
• Opera

OSX 10.8

• Chrome 22.0
• Safari 6.0
• Firefox 15.0
• Opera 12.02

You might need a live demo. The table below demonstrates few cursors most browsers will accept. Hover your mouse pointer over each box under the "Live example" column to reveal that cursor.

Icon	Value	Live example (move mouse over box)
	auto	The User Agent determines the cursor to display based on the current context.
	inherit	Takes on its parent element's computed cursor value.
	default	style="cursor: default;"
	hand	style="cursor: hand;"
	pointer	style="cursor: pointer;"
	hand & pointer	style="cursor: pointer; cursor: hand;"
	crosshair	style="cursor: crosshair;"
	text	style="cursor: text;"
	wait	style="cursor: wait;"
	help	style="cursor: help;"
	move	style="cursor: move;"
	progress	style="cursor: progress;"
	all-scroll	style="cursor: all-scroll;"
	col-resize	style="cursor: col-resize;"
	no-drop	style="cursor: no-drop;"
	not-allowed	style="cursor: not-allowed;"
	row-resize	style="cursor: row-resize;"

Implementing Custom Cursor

You might not find a built-in cursor that is suitable for your project. A good example is a paint bucket or a magnifying glass + or - over zoomable image - none of those cursors exist natively in any browser, and not all browsers support all the same "built-in" cursors. Using custom cursors, you can implement all of these in all browsers.

The cursor CSS property accepts a series of cursors, and using a url() value you can set a custom CSS cursor:

.class  {
cursor:  pointer;
cursor:  url(custom.cur) 2 4, pointer;
}

In the above example custom.cur is the custom cursor file, uploaded to your server space, and pointer is the generic cursor that will be used if the custom cursor is missing, or isn't supported by the viewer's browser.

You can also specify the coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image. The first number is the x-coordinate, and the second number is the y-coordinate. The example will set the hotspot to be the pixel at (2,4) from the top left (0,0).

If you add the CSS code into an external .css file, take note that modern browsers (Mozilla Firefox, Google Chrome) will interpret the custom cursor's URL as relative to the location of the stylesheet (as per the W3C's recommendation). However, Internet Explorer (7-9) will interpret the URL relative to the HTML root. So, in the code in .css add two url paths for .cur file, one relative to the .css file, and other url relative to the HTML document in which the .css file is included.
For example, if the .cur and .css files are in the same folder, named styles, and the HTML document is in a directory above this CSS file, we'll use this code in the .css file:

.class {
cursor: url('custom.cur'),  /* Modern browsers */
          url('styles/custom.cur'),  /* Internet Explorer */
          pointer;  /* Built-in fallback */
}

Other things to note

• The standard format that can be used for cursors is the .cur format. However, you can convert images such as .jpg and .gif into .cur format using the online image converter software.
• Internet Explorer up to and including version 9 only support URL values of type .cur for static cursor, and .ani for animated cursor. However browsers such as Firefox, Chrome and Safari have support for .cur, .png, .gif and .jpg but not .ani.
• A good practice it to make sure your .cur files are 32×32 pixels in size. IE9 seems to re-size cursors that are smaller than this to 32×32, and IE8 and under cannot show cursors larger than this size. While it is true that you can fit multiple file sizes inside a .cur file, sticking with one 32×32 image will ensure cross-browser consistency.

See the table below for browser compatibility checkup:

Browser	Lowest version	Formats	x-y-coordinates
Internet Explorer	6.0	.cur | .ani	---
Firefox (Gecko), Windows and Linux	1.5 (1.8)	.cur | .png | .gif | .jpg	1.5 (1.8)
Firefox (Gecko)	4.0 (2.0)	.cur | .png | .gif | .jpg | .svg	(Gecko 2.0)
Opera	---	---	---
Safari (Webkit)	3.0 (522-523)	.cur | .png | .gif | .jpg	3.0 (522-523)
	Since OS X 10.5 supports Safari (Mac) .cur files

Now don't go doing this willy nilly, use a custom cursor in places where you think important. Also, keep in mind that users are used to the built-in ones, so your custom cursor shouldn’t look too much different than them if you want your interface to be easy-to-use.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz