Using external images for CSS custom cursors

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/


solution

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.

Additionally, you also have to add in auto.

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

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