How can you implement a grabbing cursor icon in Chrome?

Question

I know it's possible to use a grabbing cursor icon in Chrome (in Gmail, of course), but I can't figure out how to implement it in my code. I have tried (in CSS):

body {
  cursor: grab;
}

body {
  cursor: -webkit-grab;
}


body {
  cursor: url(http://www.worldtimzone.com/mozilla/testcase/css3cursors_files/grab.gif);
}

Answer 1

Chrome Requires -webkit- before the "grab" name;

Here's an example of a style that works with both Chrome and Mozilla, and includes the change in cursor for when you are "holding" something.

#eA { cursor: -webkit-grab; cursor:-moz-grab; }
#eA:active { cursor: -webkit-grabbing; cursor:-moz-grabbing;}

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

Answer 2

Here's the styling that gmail uses if that's the exact cursor style you're after:

body {
  cursor: url(https://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur), default !important;
}

You can test it out here.

Answer 3

So in CSS you start with the basics and move to the more obscure. The browser will pick the last one that works for that specific browser. Chrome, for whatever reason, supports webkit-grab but not grab.

body {
  cursor: pointer;
  cursor: hand;
  cursor: -webkit-grab;
  cursor: grab;
}

Regarding your follow-up question about the ability to manipulate this, please try using something like the following:

document.body.style.cursor = 'move';