46

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);
}
hirse
  • 2,394
  • 1
  • 22
  • 24
Alex
  • 463
  • 1
  • 4
  • 4

3 Answers3

77

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

hirse
  • 2,394
  • 1
  • 22
  • 24
Ulad Kasach
  • 11,558
  • 11
  • 61
  • 87
  • 8
    I know this is old, but this should definitely be the accepted answer. Using images when the browser offers its own cursors is pointless and forces the same icon on all platforms, so it's definitely bad practice. – GavinoGrifoni Mar 30 '15 at 09:54
  • 3
    With Firefox 27+ the `-moz-` prefix is no longer required. – hirse Apr 04 '16 at 09:27
  • 1
    Related: showing closed hand when dragging https://stackoverflow.com/a/18294634/188926 – Dunc Jul 17 '17 at 08:47
16

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.

goodhyun
  • 4,814
  • 3
  • 33
  • 25
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • hmm it works! i actually already tried that, but without the default !import. I wonder what that does? – Alex Sep 03 '10 at 01:55
  • okay, next problem -> i have a mouseover event that calls a javascript function. in that function it sets the body's style to what's mentioned up above by nick craver. however, the cursor does not override the default cursor for a link in Chrome. after mouse-ing out of the link, the cursor is the grab icon. – Alex Sep 03 '10 at 02:15
  • 1
    @Alex - You could give the anchor itself a class with this style, or have it always have the class, since cursor only applies on hover. – Nick Craver Sep 03 '10 at 02:18
  • i think you mean a:hover, right? i tried that already... same deal – Alex Sep 03 '10 at 02:21
  • 1
    @Nick Craver sorry about that you were right... silly syntax error :) – Alex Sep 03 '10 at 02:26
  • 21
    That icon no longer exists at that URL – Urbycoz Oct 20 '14 at 14:48
  • 3
    please scroll down to the [answer](http://stackoverflow.com/a/25321042/1159167) below, since the accepted one doesn't work anymore. – Ricardo Apr 19 '16 at 20:27
  • Grabbing cursor images can be found here https://www.cdnpkg.com/slider-pro/file/closedhand.cur/ – Mariana Marica May 26 '22 at 16:13
14

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';
Nicholas Blasgen
  • 772
  • 7
  • 13
  • 3
    ...EXCEPT with browser prefixed values, because if both values are acceptable in a browser then you want it to pick the standards one, and if not it will ignore the prefixed one. So your answer should swap the order of `grab` and `-webkit-grab` – Jimbo Jonny Oct 31 '16 at 15:26
  • 2
    Just to note that the above comment was implemented in an edit. – M Somerville Mar 22 '18 at 16:55