Friday, October 11, 2013

CSS Custom Cursor that works in IE and Chrome

Frustration with CSS cursor.

This works in Chrome, Firefox and IE (8) (although I can't seem to get this snippet working in IE 8 on my blog)

<P style="cursor: url(/path/to/grab.png), url(/path/to/grab.cur),auto;">
   Text.
</P>

Problems I faced getting this to work.

  1. PNG file works fine on Chrome, not in IE.
  2. CUR file works find in IE, but not in Chrome.
  3. Had to download a program to make CUR files. RealWorld Cursor Editor worked.
  4. But Windows always re-sizes cursor files to 32 pixels x 32 pixels. So I had to resize the image in cur format to fit within the top left quadrant of a 32 pixels x 32 pixels image.
  5. Have to put reference to both file formats in the CSS property, and it wouldn't work in Chroms until I put the auto at the end. cursor: url(/path/to/grab.png), url(/path/to/grab.cur),auto;.

Page that helped me with this:

  1. W3Schools demo page for cursors.