Possible to replace cursor with my own custom image?

Question

Is it possible to replace the cursor icon apart from these:

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

with my custom image that I designed in Photoshop? I know this is possible because I have seen some websites with cursor having custom image. Question is: How do I do it and whether it is standard approach? Can I be sure that it works across all browsers?

I think your question is answered here: http://stackoverflow.com/questions/336925/custom-cursor-image-css — Michael Peterson, Aug 02 '12 at 05:24

score 6 · Accepted Answer · answered Aug 02 '12 at 05:23

6

Yes, just do...

cursor: url(path/to/image.png);

jsFiddle.

answered Aug 02 '12 at 05:23

alex

479,566
201
878
984

Cool! Didn't know the answer is so simple :). This isn't mentioned anywhere on w3schools. – Jack Aug 02 '12 at 05:24
Why did you change to image.cur? Can I not specify any png image or so? – Jack Aug 02 '12 at 05:24
@Jack I had a feeling maybe only `cur` would work (maybe older IE only supported it). But I tested it and `jpg` worked so I don't see any reason why a `png` wouldn't. – alex Aug 02 '12 at 05:26

score 1 · Answer 2 · answered Aug 02 '12 at 05:23

1

Try this: cursor: url(image.png);

Look paragraph 'Property Values': http://www.w3schools.com/cssref/pr_class_cursor.asp

answered Aug 02 '12 at 05:23

Danil Speransky

29,891
5
68
79

score 0 · Answer 3 · answered Aug 02 '12 at 09:49

Yes it's. when i have finished your cursor image, just upload it on a host website (there are many on the web) then use the following css property to use it. Supposing you want to use it on images, just do :

img  {
   cursor: url(path to your hosted cursor image) ;
}

Possible to replace cursor with my own custom image?

3 Answers3

Linked