html - 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>