CSS customized cursor / mouse pointer

Using customized mouse pointer on your webpage

Last updated on December 15, 2009. Tags: external CSS file, HTML attributes, mouse pointer

In an earlier post, I discussed how to style the mouse pointer (or cursor) on different elements of the webpage using CSS. That tutorial include the basic mouse pointers that are usually found in commonly used operating systems (Windows, Mac, Linux) such as default (arrow), pointer (hand), crosshair, text, etc. I will use the terms "cursor" and "mouse pointer" interchangebly throughout the post.

The CSS code that calls for the customized mouse pointer is similar to that of styling it using the existing mouse pointers within the operating system, with URL being the only small difference as given below.

cursor: url("pointer.cur"), default;

In the code above, the pointer.cur is the file name of the mouse pointer icon. The extension name of the mouse pointer files is .cur, which stands for cursor. You can replace pointer.cur with the actual name of the cursor file that you want to use. You can also use absolute or relative URL instead of just the file name. The file name alone will work only if the external CSS file (or the webpage itself if it contains the CSS code) is in the same folder as the cursor file.

The iframe below shows how the custom mouse pointer works. You should see a different mouse pointer, a sword-like cursor if you're using the latest versions of Internet Explorer, Firefox, Safari and Chrome.

<a href="../samples/custom-mouse/sword.htm"><b>Mouse cursor example</b>: click here if your browser does not support iframe.</a>

The "default" that follows the close parenthesis and comma in the code refers to "normal" mouse pointer that will appear if the cursor file is not available (perhaps it was accidentally deleted, renamed or changed location). You can replace it with other non-customize mouse pointers such as crosshair or pointer.

How to create your own mouse pointer (CUR file)?

You can download Real World Cursor Editor or any software that can create and edit CUR files.

Another option is to download CUR file from websites that provide free cursors like Cursors 4U. Strictly speaking, downloading an already made file does isn't exactly "customizing" mouse pointer but with their large collection and the fact that web developers rarely use customized mouse pointers, the chance of finding another website that is using the same mouse pointer as your website is very small. The swords that I used in this post is from Cursors 4U.

Restrictions of the custom mouse pointer CSS code

All the CSS rules that govern the styling of mouse pointer as discussed in that previous article also apply to this one. You can assign different mouse pointers for the entire web page, for links and for different block and inline elements as shown in the following examples:

body {cursor: url("cursor1.cur"), default;}
a {cursor: url("cursor2.cur"), pointer;}
li {cursor: url("cursor3.cur"), crosshair;}
p {cursor: url("cursor4.cur"), text;}
.class1 {cursor: url("cursor5.cur"), move;}

One difference of custom mouse pointer to the "normal" mouse pointer is that you cannot implement it using the style attribute. Normal mouse pointers can be implemented as style="cursor: pointer;". You cannot do this in custom mouse pointer because the URL of the CUR file is in quotes and browsers interpret the quote at the start of the URL as the end quote of the style attribute.

The only way to implement custom mouse pointer is by using an external CSS file or by placing CSS in the header section.

Cross-browser compatibility

This CSS code works in Internet Explorer (both 6 and 7), Firefox, Safari and Chrome. However, there's a little difference.

In Internet Explorer, this CSS code still works even if you omit the "normal" cursor and the comma that follows the close parenthesis, like {cursor: url("pointer.cur");}. However, that's not the case in Firefox, Safari and Chrome. These three browsers will still require the back-up normal cursor even if the customized cursor is clearly there, and behave as if the code wasn't there if no backup normal cursor was provided.

If the custom mouse pointer isn't there (perhaps accidentally deleted or error in the URL) and no normal cursor was provided, Firefox, Safari and Chrome will use the text cursor while Internet Explorer will use the default arrow cursor.

Animated cursors

These are mouse pointers that change in cycles like an animated GIF. Animated cursor files have extension names of ANI instead of CUR. The same CSS code used in enabling custom mouse pointer can be used to enable animated cursor; just use the ANI file instead of the CUR file. You can also use Real Word Cursor Editor to create ANI files, and Cursors 4U also has a large collection of these.

However, animated cursors are supported only by Internet Explorer. Firefox, Safari and Chrome behave as if there's no CSS code that dictates the mouse pointer.

Posted by Greten on October 25, 2009 under Cascading Stylesheet (CSS)

Share and Enjoy: