Using external images for CSS custom cursors

Question

Is it possible to use external image URLs for CSS custom cursors? The following example doesn't work:

HTML:

<div class="test">TEST</div> 

CSS:

.test {   background:gray;   width:200px;   height:200px;   cursor:url('http://upload.wikimedia.org/wikipedia/commons/d/de/POL_apple.jpg'); } 

Fiddle: http://jsfiddle.net/wNKcU/4/

Answer 1

It wasn't working because your image was too big - there are restrictions on the image dimensions. In Firefox, for example, the size limit is 128x128px. See this page for more details.

Additionally, you also have to add in auto.

jsFiddle demo here - note that's an actual image, and not a default cursor.

.test {    background:gray;    width:200px;    height:200px;    cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;  }

<div class="test">TEST</div>

Answer 2

I would put this as a comment, but I don't have the rep for it. What Josh Crozier answered is correct, but for IE .cur and .ani are the only supported formats for this. So you should probably have a fallback just in case:

.test {     cursor:url("http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif"), url(foo.cur), auto; }