Getting a customised CSS cursor to work in Firefox and Internet Explorer

As some of you may know, in CSS2 it is possible to change the appearance of an element’s cursor by declaring the value of the element’s cursor property. There are various settings for this, e.g. default, crosshair, and pointer (a full list of values and their descriptions is available over at w3schools), but you can also define your own cursor using the url property.

For example, to assign this image pawto a cursor, we write the following: #paw { cursor: url('paw.gif'); }

Hovering over PAW, should change the cursor to the image above, except in Firefox and Internet Explorer.

Firefox

To get this to work in Firefox, you need to add something extra to the end of the declaration: #paw { cursor: url('paw.gif'), auto; }

Using the code above, PAW should now change the cursor correctly in Firefox.

Internet Explorer

For Internet Explorer, either a Microsoft Windows Cursor (.cur) or Microsoft Windows Animated Cursor (.ani) file is required. There are plenty of applications out there that will help you to create file of this type, so Google is your friend.

Once we have the .cur file, we change the url to this file, and PAW should now change the cursor correctly in Internet Explorer.

And for both?

So now you’re wondering what declaration should be made in order for it to work in both browsers? Well the following will do the trick: #paw { cursor: url('paw.gif'), auto; cursor: url('paw.cur'); cursor:crosshair;}, as the browser will try the next one if the previous declaration fails. This is why it’s always a good idea to have a fall back at the end, just in case the others don’t work.

And for testing: PAW.

For more detailed explanation of the cursor property and where it works and doesn’t work, read cursor styles over at quirks mode.

Update for: Internet Explorer 9

When this post was written, Internet Explorer 9 didn’t even exist. But one of the comments below pointed out that none of these methods work in Internet Explorer 9. In order to get IE9 to work, you need to use a .cur file definition and include another cursor at the end, just like the Firefox example above does.

Therefore PAW should now change the cursor correctly in Internet Explorer 9.