Yarin Yarin - 7 months ago 15
HTML Question

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/

Answer

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 {
  background:gray;
  width:200px;
  height:200px;
  cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}
<div class="test">TEST</div