Why is the CSS cursor property not working with a custom URL?

Question

CSS:

#cursor {
  cursor: url(cursor.gif);
}

HTML:

<div id="cursor">
  <p>Hello world!</p>
</div>

What browser have you been testing?

www139
– www139

2015-12-12 22:44:58 +00:00
Commented Dec 12, 2015 at 22:44 — www139
– www139, Commented Dec 12, 2015 at 22:44

Josh Crozier · Accepted Answer · 2015-12-12 22:54:00Z

4

According to MDN:

zero or more URLs may be specified (comma-separated), which must be followed by one of the keywords defined in the CSS specification, such as auto or pointer.

Therefore you need to define a cursor value as fallback for the url().

For instance, using auto:

#cursor {
  width: 100px;
  height: 100px;
  border: 1px solid;
  cursor: url(//placehold.it/20), auto;
}

<div id="cursor"></div>

edited Dec 12, 2015 at 22:54

answered Dec 12, 2015 at 22:46

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

www139 Over a year ago

It is working in latest version of Chrome on OS X :) (+1)

Nenad Vracar Over a year ago

OP is trying to use .gif as cursor, isn't that the main point of this question?

Josh Crozier Over a year ago

@NenadVracar The main point was that it wasn't working at all. My answer showed that you need to add auto. Regardless of whether the image is a png/gif/jpg`, the issue is still the same.

Collectives™ on Stack Overflow

Why is the CSS cursor property not working with a custom URL?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related