11

I can't find any information about this topic. I want a simple custom cursor with CSS. I have this code right now:

cursor: url('img/cursor_left.png'), auto;

It shows the cursor, nothing wrong. But it's blurry, because it isn't compatible for retina display. Anyone knows how to fix this?

Thanks, Angelo.

Angelo A
  • 2,744
  • 6
  • 28
  • 37

1 Answers1

25

I haven't tested this, but it should be possible to use image-set:

cursor: url('img/cursor_left.png'), auto;
cursor: -webkit-image-set(
  url('img/cursor_left.png') 1x,
  url('img/cursor_left_hi.png') 2x
), auto;
Russell Zahniser
  • 16,188
  • 39
  • 30
  • 3
    The reason for the duplicate lines is to provide a reasonable fallback on IE. On Firefox, Chrome, and Safari the second `cursor:` definition is valid and overrides the plain url one. – Russell Zahniser Mar 22 '13 at 18:46
  • Tried it on Firefox and unfortunately it doesn't work. (I think it doesn't read the -webkit-image-set definition, as it isn't a webkit browser). – Angelo A Mar 22 '13 at 18:56
  • Sorry about that; I was trusting the compatibility information in the article I linked rather than trying it out myself. Maybe plain `image-set` would work? – Russell Zahniser Mar 22 '13 at 19:01
  • Tried it, unfortunately no Mozilla support. Using the fallback for non-webkit browsers. – Angelo A Mar 22 '13 at 19:44
  • 6
    This currently works only on Chrome. It is broken on Safari in a way that makes it more or less useless: the 2x image is used, but displayed at twice the intended size. https://bugs.webkit.org/show_bug.cgi?id=120783 – John May 29 '14 at 22:50
  • 1
    It does work on Safari in the meantime. Even without the prefix: `image-set` is enough. Chrome still needs the prefix. And for other browsers I believe there is still no solution... – Merc Feb 23 '17 at 09:59