Custom website cursors

Using custom cursors on your website can be very simple, but can also be a bit frustrating, depending on what exactly you want to do, so I will try to give a clean breakdown to simplify the process.

How to use a custom cursor on an element

To enable a custom cursor whenever your mouse hovers over a certain area of a website, just use the css cursor property, like this:

#element{
  cursor: wait;
}

To use a certain cursor on your entire site just set the cursor property on the html element. Here is a list of available cursors to use.

What about a custom image?
Simply enter the url as a value for the property, like this:

#element{
  cursor: url(arrow.gif);
}

What’s the catch?

Just like most other simple web tricks, there are some browser issues to keep in mind.

Supported file types:
In my tests only Chrome and Firefox accepted gif images for custom image cursors, for all the other browsers it had to be .cur or .ani. The .cur file is a cursor file used by windows and the .ani is an animated cursor file. You can use software to create these files, Just Cursors is one of them. So if you want all browsers to use your images, use .cur or .ani files.
Note: Firefox dropped support for .ani cursors, and chrome does not support it either

And then, as a failsafe, Firefox requires that a second non–url cursor be given to the css command, like this:

#element{
  cursor: url(arrow.gif), default;
}

Supported cursors:
Not all browsers support the default set of cursors available to you. Luckily for us, Quirksmode did a test to see who supports what.

Why would I want to use custom cursors?

Well maybe you just want your site to have a different look and feel, but the more functional use for cursors is with ajax or page loading for example:
If you have a ajax call running in the background, and you want to inform your user to wait (im)patiently while this process completes, then swopping the normal arrow for the good old sand dial will do the trick. So just before an ajax call triggers, you can set the cursor to wait, and on success you can set it back again. This simple little thing can really work wonders for user experience! Here is an example setting the css cursor to wait with jquery:

$('html').css('cursor','wait');

Best practices

Try not to change the cursor except where it conveys relevant information to the user, as in the example above. Also don’t use animated cursors unnecessarily, because it can become annoying very quickly and make your site look cheap and tacky (remember the glory days of animated gifs?). :)