Using external images for CSS custom cursors

html css cursor
Yarin picture Yarin · Aug 31, 2013 · Viewed 140.7k times · Source

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

Josh Crozier picture Josh Crozier · Aug 31, 2013

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>

Related questions

Change cursor to hand when mouse goes over a row in table

How do I change the cursor pointer to hand when my mouse goes over a <tr> in a <table> <table class="sortable" border-style:> <tr> <th class="tname">Name</th&…

Read More
how to set cursor style to pointer for links without hrefs

I have a lot of <a> html tags without the href attribute for making onclick javascript calls. These links do not have a pointer style of cursor. They have text style cursor. How can I set the cursor …

Read More
Hide cursor in Chrome (and IE)

I have the following CSS that hides the mouse cursor for anything on the web page. It works perfectly in Firefox, but in IE and Chrome, it doesn't work. html { cursor: none; } In Chrome, I always see the mouse pointer. …

Read More