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 
to 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.
9 Responses
Thanks for the useful tip. My question is: does this work with animated gif’s also? In Firefox i can see the gif loaded as cursor but it is not animated.
Hi zmin, to be honest I don’t know as I never tried it with an animated GIF. Sorry.
Hello Ian, thank you for writing such a useful tutorial. I was looking for an IE fix to change the cursor to an image when I landed here. The image that you used in the ‘And for testing PAW’ text, isn’t working in IE 9. That is exactly what I was looking for. Can you help?
Hi Mansoor. Thanks for pointing that out. As you can see from the date of the article’s initial posting, IE9 didn’t even exist at the time!
I have now updated the article to include a working IE9 example. Thanks for prompting me to do this.
Is it possible to split the screen in two and define a customised cursor for the left side and another customised cursor for the right side?
wia, of course it is. Since it’s just defined via CSS, if the left side div (for example) had a class of ‘left’, and the right div had a class of ‘right’, then you would just need to define two different cursors in your CSS under .left and .right.
Thank you so much for the IE9 update. It is the first thing that has worked since I began (an hour+ ago)!
Hello!
I have used this css syntax:
cursor: url(‘../img/icon/zoom_out.png’), pointer;
cursor: url(‘../img/icon/zoom_out.cur’), pointer;
In IE9, the cursor is a HAND.
Can you please tell me what it is that I am doing wrong?
Thank you!
Are you sure that the zoom_out cursor exists? It looks like it’s falling back to the pointer cursor. Also try changing pointer to auto as in the examples above.