Cross-browser custom CSS cursors
I saw sometime ago the funny drawing below.
You can see that big portion is for making the design work in Internet Explorer.
First you laugh, but if you developed rich web sites/user interfaces you actually realize that this is only underevaluated. I would also extend it and say “make the design cross-browser”.
The tip that I’ll present you next it’s actually a small workaround and it will help you reduce that big pie slice.
Let’s say that you want to change the cursor for a page, for links or for some other specific elements. How? Using CSS. Then we should first go at W3C and read how to do it.
So the cursor property is the answer.
As good web developers we will separate the CSS from HTML and create the following structure
/
+-- cursor.html
|-- cursor
+-- cursor.css
|-- cursor.cur
cursor.html<html> <head> <link rel="stylesheet" type="text/css" href="cursor/cursor.css"> </head> <body> Hello world! Look at me, I have a new cool cursor! </body> </html>cursor.cssBODY { cursor: url(cursor.cur); }
Now everything should be set, so let’s give it a spin. Of course, we want everything to be cross-browser. For the sake of testing open cursor.html in Internet Explorer, Firefox and (for those Mac lovers) Safari. Surprise, the cursor is the default one in IE and Mozilla, but it’s the desired one in Safari. Frustrating isn’t it? You write W3C compliant code and it doesn’t work in the first two major browsers. The “best” part is that this is happening for different reasons.
Let’s first take care of Mozilla. Remember from CSS2 specification that cursor property holds a list of possible cursors and the browser should use the first found one or the default one if none is found.
Add to this list default and modify the cursor property from
cursor: url(cursor.cur);
to
cursor: url(cursor.cur),default;
And now refresh the page in Firefox. Even tough it doesn’t make sense at all, it will work and you will see your nice cursor.
And now IE comes next (as it still doesn’t work). As you noticed in cursor.css, we used for the cursor property relative URIs. To quote from there: For CSS style sheets, the base URI is that of the style sheet, not that of the source document. But if you modify the cursor property to
cursor: url(cursor/cursor.cur),default;
this will actually work. This is because in IE, for style sheets, the base URI is that of the source element, not that of the style sheet. Totally opposite to W3C specifications, but, yeah … that’s MSIE.
And if we want to still work in Firefox and Safari we have to keep the property value as below:
cursor: url(cursor.cur),url(cursor/cursor.cur),default;
. So everytime you want to define a crossbrowser CSS cursor you should define it as a list containing the url relative to the source element, the url relative to the style sheet and the default value.
The above examples were tested on IE 6.0.2900.2180, IE 7.0.5730, Firefox 2.0.0.11, Firefox 3.0.1, Safari 3.0.4, all under Windows XP SP2. I also tested in Opera 9.25, but it seems that it doesn’t support custom cursors.
Later edit – Jan 28, 2009:
The above examples were also tested under Firefox 3.0.5, Internet Explorer 8 beta 2 (inside IETester), Internet Explorer 8 RC1 (version 8.0.6001.18372CO), Safari 3.2.1 (525.27.1), Google Chrome 1.0.154.43 under Windows Vista.
I also tested with IE 5.5 (inside IETester), but it doesn’t support custom cursors.
There is also an example.
Later edit – Feb 10th, 2010:
If you want a custom cursor for an image (IMG) or link (A), then you need to attach the CSS to that tag, not to an enclosing container (e.g. DIV).
adrian's blog 
Thanks, I fiddled around with this problem for some time before I found your blog. The “, default” for Firefox is really stupid…
Thanks, I fiddled around with this problem for some time before I found your blog. The “, default” for Firefox is really stupid…
Hi,
just to point out that the answer to your comment: “And now refresh the page in Firefox. Even tough it doesn’t make sense at all, it will work and you will see your nice cursor.”, is because, according to CSS standards, you should provide that alternative cursor format (“default” in your example) in case the first one is not found. Firefox doesn’t accept a sentence that does not contain that “final alternative cursor”. Instead of “default” (a fixed arrow) it can be, for instance, “auto” (the standard behavior, when cursor changes to different standard shapes depending on the field it’s over), “help” or other cursor mode values.
Thanks. I found thanks to this site that the custom cursor I was using was using the wrong (but logical) URI.
This is sweet! All the other sites make you copy and paste all sorts of complicated. This is very elegant indeed.
Hello …
Someone could tell me what would be the script or syntax to change the cursor on a template made for Joomla, it would really appreciate it please, what would the syntax, where and how this would … thanks
something similar to the example and put this in this link http://beradrian.users.sourceforge.net/articles/cursor.html
In Spanish
Hola…
Alguien me podría decir cual sería el script o sintaxis para poder cambiar el cursor en una plantilla hecha para Joomla!, se lo agradeceria muchisimo por favor, cual seria la sintaxis, donde y como se pondria… gracias
algo parecido al ejemplo que pusieron y que esta en este link http://beradrian.users.sourceforge.net/articles/cursor.html
Am I missing something, or does Firefox on the Mac, even Firefox 3, still not support custom cursors?
To tell you frankly I don’t have a Mac to play with. The Safari version that I tested with, I was running it under Windows XP.
I have not been able to get the custom cursor to work in FF3 or Safari 3 on the mac either… sure would like to know if it’s even possible.
I tried on FF3 and Safari3 on Windows and it seems to work. This site is a good example: http://www.lazer.ro/lasercombat. You can even change the cursor from a left hand menu. Tell me if it works on Mac too, even tough it uses .cur files.
Hmm, interesting. I’m on a Mac and it seems to work in Safari3 but still not FF3.
Thank you so much for this, I was pulling my hair out trying to understand why my custom cursor was working in one browser, but not others.
its not working in Internet Explorer 8. can any body help me out.
thanks in advance
I just tested with Internet Explorer 8 RC1 (version 8.0.6001.18372CO) and with Internet Explorer 8 beta 2 (inside IETester). It works.
Can you post your page/code/URL that doesn’t work?
Thanks.. It really saved the day.
Love the advice. Thank you.
Real useful stuff here. Now to the problem on a Mac. I’m hypothesizing, but maybe if you use a different file type than .cur it will work? I have used a .PNG file as my cursor, and it works, on Windows. I don’t have a Mac to try this on but this might solve the problem, again I’m only hypothesizing.
It doesn’t work in Safari 3.2.2, have you found some fixes yet? Thank you!
I suppose you are using Safari on a Mac. What kind of cursor files are you using? I’m not sure that .cur files are supported on Mac.
I am not able to get it work on Firfox 3, the only difference is i use a .ani file (animated cursor).
Any idea ?
By providing an absolute value for the cursor url instead of a relative one the need to declare it twice should be avoided…
Oh and a response to Matthew. According to MozDev animated cursors of any kind aren’t supported. Animated gifs will just show the first frame and .anis won’t show at all.At some point later they will be supported but for now just stick with a .cur.
Indeed, specifying an absolute URL solves the problem. But sometimes, I really don’t like this. When you move from a development environment to the production one, you need to change all the links (in an automatic way or not). So that’s why I prefer relative URLs. Moreover, imagine a CSS that describes a theme of your website. There an absolute URL is totally impractical.
You should be able to use /images/cursor.cur instead. Dropping back to the webroot before finding the image.
you have just saved my life! i use firefox, but most of my blogger friends use IE, my custom cursor will work on both! thanx 😀
Nice .. I almost resorted very ugly workarounds.
Hello,
A fairly complete cross-browser compatibility table for the “cursor” CSS property is here:
https://developer.mozilla.org/en/CSS/cursor
j.j.
Hallelujah!
You made my day!
I’ve been struggling for hours to get it to work and all that needed to be done was adding ‘,default’ to the declaration.
btw. you can easily use a relative path that works all the time. Just add an extra slash at the beginning of the url to refer to the root of your website, like:
{cursor: url(/cursor/cursor.cur), default;}
last problem solved.
Again, thnx alot!
ps. I found a great free editor to create and modify cursors:
http://www.rw-designer.com/cursor-maker
Works currently on newest version of Safari for Mac but not on Firefox 3.5. Come on FF, keep up.
Thank you thank you thank you! I needed this information and now my cursors work in IE. Stupid IE!
Hey Dude!! I love you 😉 I was banging my head with the so complicated scripts out there to get my custom cursor work cross browser.
Firefox on Mac may be added later:
https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property
What about SSL connections? I can’t force IE on HTTPS web page to show custom cursor by relative url. I need to use absolute, but still cursor doesn’t work if the absolute url is HTTPS, but only if the absolute url is HTTP (but then on the HTTPS web page IE reports “this page contains both secure and nonsecure items”…)
Perhaps I missed something but my new cursor reverts to the standard hand pointer in Google when running over links. What have I missed?
Can you post your code here?
hmmmm. I’ve been screwing around with it. currently the page is http://kyzix.kicks-ass.net/wii/index.htm with the css here http://kyzix.kicks-ass.net/wii/cursor.css
I see that this happens in both IE and Chrome.
Remove the inline style for the link element (A) and put this into your CSS
BODY, A:hover {
cursor: url(wii-pointer-ccw.cur), default;
}
FIXED! Thanks for that, Excellent!
I got it to work in ie and Firefox… but ie 8 stretches my cursor and it looks weird…. is there anyway to re size the cursor in only ie
Can you please post your code here? Or send it to me?
can i use .ani files
As far as I know animated cursors like .ani or animated .gif are not supported yet.
Hi
I got it to work with FF but NOT IE7+.
Can it have to do with the doc type ?
It´s should only work on the top wide photo on the page.
And the wide near the bottom.
Have you tried to use the CSS class on the A element instead of the IMG one?
Just tested it:
If I put the class for IE on the a tag I get the arrow cursor instead of the pointer in IE …
Sorry, the lower photo is only at this page …
Hi
Here is what I found out:
My own cursor renamed from .gif to .cur does not work with IE7,
but this works with both IE7 and FF3.5 so far 🙂
cursor: url(“../graphics/magnify.cur”), url(“../../graphics/magnify.cur”), pointer}
with a cursor found on web.
That is because .cur and .gif are entirely different formats. The .cur format is identical to the Windows .ico format, except that a .cur file has a hotspot (the tip of the cursor).
Renaming a .gif to .cur is pointless as it will not make it into something that it is not. Firefox supports .gif cursors, and ignores the false extension, so it works. IE 7 only supports .cur and .ani cursors, and since it is a .gif it does not work.
Fine though CAUTION
It works all right but you cannot live a blank space between the bracket and the comma, like this:
cursor: url(cursor.cur) , url(cursor/cursor.cur) , default;
This will NOT work in IE (at least IE 7.0.6000….
Even though I didn’t encounter this, I fixed the code in the post. Thanks for reporting this.
Sorry. I ment you cannot write
url(cursor.cur)_, _url(cursor/cursor.cur)_,_default;
(where _ means blank)
This does not work on my IE test.
Then I wrote:
url(cursor.cur),_url(cursor/cursor.cur),_default;
And it magically works.
blank space was killing me…. THANKS!!!
H!.. thanks a lot!! but it doesn’t work in Firefox 3.5.5! I’m on a mac.. any ideas what to do? it’s not possible with custom cursors at all in Firefox 3???
According to
https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property
Firefox for Mac does not support custom cursors. Use one of the standard cursor types (auto, crosshair, default, etc.) as the fall-back.
I have no idea why this is working:
I wanted the hand cursor, so I downloaded it from google maps and used it as a custom cursor. It didn’t work in Firefox 3.5.5 (mac) until I did this:
#body {
cursor: url(absolute url to cursor),url(cursor/cursor.cur),move;
}
Works for me! :O
btw, does anyone know how change the cursor when holding down the mouse button? onclick change and when released it should change back..?!
peace
What about making an action for that ?
You could either use CSS classes or just change the cursor property in the onMouseUp/onMouseDown events.
For example:
In your CSS, create a “drag” class and set a different cursor.
Whoops, it ate my HTML.
That should be:
<body onmousedown=”document.body.className = ‘drag’;” onmouseup=”document.body.className = ”;”>
looks like firefox has its own hand cursor?
Hi
The best thing to do is to make a full path, in the style sheet, to the cursor file like http://www.photopress.dk/graphic/cursor.cur
instead of the workaround with two relative paths to the .cur, on for IE and one for FF.
Here I had 1481 file not found (404 in the stat pages) in the last days because there is allways one of the paths who are wrong 🙂
Seems that theese cursors does not work with Opera (?)
Or use /graphic/cursor.cur instead.
You will get an 404 error using this link, I did write Adrian about this, but NO DO. !!!
Anyway click at the top picture with the magnifying glass the code is in the css file:
.zxin {cursor: url(‘http://www.photopress.dk/graphics/magnify.cur’), pointer}
.zxout {cursor: url(‘http://www.photopress.dk/graphics/zoomout.cur’), pointer}
This works in FF and IE !
also big noise für eine semi-working halbfertige solution. this is not working on mac! blizz blizz
That is a very accurate graph.
just wanted to say ‘thanks, man!’ 😉
Really nice article Adrian !
Thanks
Thank you very much, well documented. I tried in Opera for hours but I didn’t know about custom cursors are not supported in that browser.
Oh! and the pie chart is really funny.
really thank you for posting this well organize article…thanks…
ADRIAN !!! … very interesting and useful your code, but doesn’t work with a Doctype.
If you find any solution, please publish it or send mi a mail.
thanks a lot.
Which Doctype are you trying to use, so I can try it too?
who knew about adding ,default;
thanks a lot
Thanks for this. I was intimately involved in the develoment of the web, CSS and so on. But my conclusion is that we failed in providing a coherent system. I have a page with single line of code that uses four different syntaxes: php, javascript, html and SQL.
To make a site one needs html, http, css, php, javascript and SQL. Six different and VERY UGLY languages (seven if you count Java or Flash for applets). Was this really necessary? Definitely not! Result: tons of sites like this one where people explain their experimental approaches. What a way of getting anything done.
That pie chart is good. I gave up bothering about Internet Explorer, but I have a similarly large slice for coping with the syntaxes. I once lost a whole afternoon because I used the Javascript “+” for string concatenation in php instead of “.” and got an acceptable result but not quite what I had intended.
Sigh.
Robert.
Actually you can get rid of php and sql. I use Java/JSP/Hibernate/Spring. Much more natural.
Thanks. I may explore a little.
I’m using livecode (http://www.runrev.com) for all stuff I need locally. There is a set of modules that allows one to replace javascript, php, flash and java all with the same language. The syntax is even more natural. I hope it will take off. I’m going to the conference at the end of April.
Have a good day,
Robert.
Okay, I’m a poorly trained hack that does manage to make limited pages. I like to create pages for use in myleague tournaments. Therefore, I cannot store a stylesheet on the same site. I do create individual folders for each tournament page elsewhere, so I can create css sheets just for that page if someone could show an example of how to point to other sites.
Thanks for any help provided.
Your question is not actually related to the article. You can reference a stylesheet like <link rel=”stylesheet” type=”text/css” href=”http://your.server.com/path/to/file.css”/>.
Thanks. This worked perfectly!
Hey do you know anything about Wikia coding? I know this should work, but I can’t seem to get this to work in a Wikia. They (Wikia Staff) keep telling me its possible, but won’t help.
Oh okay for somereason the cursor: url(xxx), default; code worked for IE on the Wikia and not FireFox… blah!
Thanks!!! I really need this trick!! I’m your follower since today!
I almost got blind after seeing the example … change that background color!
Really? This is your first and only comment? This is what you got from this article and what struck you? Then maybe this is not the blog for you.
interesting and informative, thank you.
I was looking for some help in changing the size of the cursor. In Xwindows my cursor size is 64, because I have a 3 30inch monitors, total resolution 7680 x 1600. 64 pixels gives a 7/16″ high cursor and is right for that resolution.
However, when I cursor over an open firefox window, the cursor switches to a left-arrow, but the size is about 1/8″ high (half the size of the 18 point font).
I am not particular about which cursor image I have–I just want to SEE it, that is, have it’s size be 64 pixels.
Do you know if there is a size specification for firefox cursors?
Or do you have to load each cursor image into an editor and make them bigger that way?
Just for the record, under Xwindows, using Opera version 11.52, the system cursor (64 pixels high and wide) is still used within Opera windows. It is only firefox that the cursor changes images and goes so small.
Any ideas?
SKM
As far as I know you cannot change the cursor size through CSS. You’ll have to use different images.
i was so glad i found this !!
it is not working in Chrome though.
also, how can i get it to work when my cursor is over an image slider using javascript ?
http://www.imprintwebdesign.com/point_lobster
I just tested in Chrome under Windows 7 and it is working.
In your page the links were not working, But there you should add :hover to the CSS rule. Also I don’t think it will work on Flash. You can implement a slider using HTML/CSS/JS :). And then you can either use the :hover pseudo-selector or change the style or CSS class in JavaScript.
Adrian,
Thanks, This page is just a mockup and as such, the links only have # tags.
Sorry, I meant to say that it wasn’t working on Opera. I just tried it again on Opera using W7 with no luck.
I’ll keep working on the hover over Flash and if i get anywhere, I’ll report back.
Your article makes it sound like the cursor has to be in a special .cur cursor format. Cursors can in fact be in any image format.
Great article! If I wanted to just have a custom cursor on mouse over only, do you know how to do this? Thanks!
Just use the :hover CSS pseudo-selector.
A:hover {cursor: url(cursor.cur),url(cursor/cursor.cur),default;}
This comment was removed due to offensive character.
Hi,
Modern browsers can use PNG for cursor, IE can use ANI format.
So, in css it can be used, for example:
#idiv { cursor:url(‘bluearrow.ani’), url(‘bluearrow.png’), move; }
excuse me but i just didn’t understand were to put my code can u answer me please?
Nice post, but I have a query, Is it possible to download a cursor (without accessing the server again) once an HTML page is fully loaded on the client side ?? If yes, how ??
I know I can find out the cursor URL, but what if I want to download within a single request ??
thanks
Not sure what you mean. A cursor is a separate resource and as far as I know you cannot do something like sprites. But you can use the data-URI scheme: http://en.wikipedia.org/wiki/Data_URI_scheme, but not supported in IE7, for which you can revert to a separate resource.
Thank You Adrian for your reply. Well, to elaborate more, I’m working on some security implications using mouse custom cursors, which can be broken if cursors can be saved without accessing server twice through the same URL. To give a step by step problem description:
On request to an HTML page, it is rendered with a DIV tag that has a custom cursor.
Now I want to save that cursor file as an Image (simly *.cur) type on my computer without asking the server again.
Is it possible through some client side code ??
First of all to save directly on the client machine it will require something like Files API from HTML5.
If you rely on browser capabilities, there isn’t something like “Save cursor as” similar to “Save image as”.
You can include a link to the cursor file and rely on browser cache (you can set the cache headers for the cursor request).
But, in my opinion, the best way will be to render on the server side the same cursor (use referrer or a temporary code in the URL)
Thanks, So can I conclude that it is impossible to save the cursor for processing or comparing with an image on the HTML page – without making a SECOND reference to the URL of the cursor ??
If yes, can you please provide me a reference so that I can use it in my Project/Thesis work ??
If not, can you provide me a proper way to do that ??
Thanks a lot.
Well-written, but it would be better if we had live demo like here: http://basicuse.net/articles/pl/textile/html_css/css_changing_cursor to show how it works.
An interesting discussion is definitely worth comment. I think that you should publish more about this topic, it might not be a taboo matter but generally folks don’t talk about such subjects. To the next! Kind regards!! http://www.mentarimedia.com
Other do’s and don’ts on making a website is having a good content.
Click the Content Advisor tab and then click thhe ‘Enable’button to start using and
managing thhe settinghs for the tool. To find them these
days iis just like a poece of cake.
http://dhjsdhv2667226ll.com