228

I have a JavaScript webapp where the user needs to grab the background to move the whole screen around. So I want the cursor to change when they're hovering over the background. The -moz-grab and -moz-grabbing CSS cursors are ideal for this. Of course, they only work in Firefox... are there equivalent cursors for other browsers? Do I have to do something a little more custom than standard CSS cursors?

7 Answers 7

568

In case anyone else stumbles across this question, this is probably what you were looking for:

.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
11
  • 59
    for some reason the 'grabbing' only appears when i release the mouse. any idea why this is?
    – Jona
    Commented Jun 13, 2016 at 9:56
  • @Jona my guess is that you didn't add the grabbable class to any element which can be grabbed, and you're toggling the class when they're being dragged. Commented Jul 15, 2016 at 20:13
  • 2
    nice extended answer, thanks for adding the extra "grabbing" bit. nice touch. :)
    – scotself
    Commented Aug 19, 2016 at 20:34
  • 2
    For anyone having trouble with this solution, I had to set the grab cursor on :hover rather than the plain selector, i.e. .grabbable:hover in the example above. Commented Oct 25, 2016 at 10:15
  • @Jona adding these styles to the parent <ul> instead of <li> in my case solved the issue Commented Jul 17, 2017 at 10:24
139

I think move would probably be the closest standard cursor value for what you're doing:

move
Indicates something is to be moved.

4
  • 1
    I saw the move icon, thought the grab icon was better. But now that you pointed out w3c considers that cursor "Indicates something is to be moved," it makes the most sense. Thanks.
    – at.
    Commented Apr 18, 2011 at 7:05
  • 2
    @at: You can specify multiple cursors in a comma-delimited list and the user agent should use the first one it understands. So you can use the -moz* ones and "move" as a fallback. Commented Apr 18, 2011 at 7:15
  • 18
    @muistooshort are you sure a comma-list still works? I'm using cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab; with most preferred last.
    – Bob Stein
    Commented Jul 19, 2013 at 21:09
  • 2
    @BobStein-VisiBone: I think there could have been some confusion up there a couple years ago. AFAIK the comma-list works if you're specifying multiple formats like cursor: url(example.svg#linkcursor), url(hyper.cur), pointer rather than multiple possible values. I think you're approach might be necessary. Commented Jul 19, 2013 at 21:41
62

CSS3 grab and grabbing are now allowed values for cursor. In order to provide several fallbacks for cross-browser compatibility3 including custom cursor files, a complete solution would look like this:

.draggable {
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: url(images/grab.cur); /* fallback: Internet Explorer */
    cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
    cursor:    -moz-grab; /* Firefox 1.5-26 */
    cursor:         grab; /* W3C standards syntax, should come least */
}

.draggable:active {
    cursor: url(images/grabbing.cur);
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    cursor:         grabbing;
}

Update 2019-10-07:

.draggable {
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: url(images/grab.cur); /* fallback: Chrome 1-21, Firefox 1.5-26, Safari 4+, IE, Edge 12-14, Android 2.1-4.4.4 */
    cursor: grab; /* W3C standards syntax, all modern browser */
}

.draggable:active {
    cursor: url(images/grabbing.cur);
    cursor: grabbing;
}
8
  • 2
    Your post is a duplicate of J.Steve's
    – user2230470
    Commented Sep 22, 2016 at 5:41
  • 12
    @user2230470 It is different in two important points: First, it provides an cursor image for the browsers not supporting grab, but cursor images. Second, it's best practice to have standards syntax after the vendor prefixed values.
    – Volker E.
    Commented Sep 30, 2016 at 18:15
  • really?! how come? also, where can i find more info about standard practices akin to such.
    – user2230470
    Commented Oct 2, 2016 at 2:29
  • 10
    @user2230470 - because in cases where a browser supports 2 behaviors where the prefixed one may have been implemented slightly before the finalization of the standard one (and therefore may act differently) you want it to use the standard one...and whatever definition comes LAST is the one the browser will use. Therefore the standard one should go last. Commented Oct 31, 2016 at 15:15
  • 3
    is images/grab.cur an example URL for an image that I need to host on my web server, or is that some magic IE thing?
    – jrz
    Commented Aug 12, 2017 at 2:48
29

"more custom" than CSS cursors means a plugin of some type, but you can totally specify your own cursors using CSS. I think this list has what you want:

.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(https://www.w3schools.com/cssref/myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
<h1>The cursor Property</h1>
<p>Hover mouse over each to see how the cursor looks</p>

<p class="alias">cursor: alias</p>
<p class="all-scroll">cursor: all-scroll</p>
<p class="auto">cursor: auto</p>
<p class="cell">cursor: cell</p>
<p class="context-menu">cursor: context-menu</p>
<p class="col-resize">cursor: col-resize</p>
<p class="copy">cursor: copy</p>
<p class="crosshair">cursor: crosshair</p>
<p class="default">cursor: default</p>
<p class="e-resize">cursor: e-resize</p>
<p class="ew-resize">cursor: ew-resize</p>
<p class="grab">cursor: grab</p>
<p class="grabbing">cursor: grabbing</p>
<p class="help">cursor: help</p>
<p class="move">cursor: move</p>
<p class="n-resize">cursor: n-resize</p>
<p class="ne-resize">cursor: ne-resize</p>
<p class="nesw-resize">cursor: nesw-resize</p>
<p class="ns-resize">cursor: ns-resize</p>
<p class="nw-resize">cursor: nw-resize</p>
<p class="nwse-resize">cursor: nwse-resize</p>
<p class="no-drop">cursor: no-drop</p>
<p class="none">cursor: none</p>
<p class="not-allowed">cursor: not-allowed</p>
<p class="pointer">cursor: pointer</p>
<p class="progress">cursor: progress</p>
<p class="row-resize">cursor: row-resize</p>
<p class="s-resize">cursor: s-resize</p>
<p class="se-resize">cursor: se-resize</p>
<p class="sw-resize">cursor: sw-resize</p>
<p class="text">cursor: text</p>
<p class="url">cursor: url</p>
<p class="w-resize">cursor: w-resize</p>
<p class="wait">cursor: wait</p>
<p class="zoom-in">cursor: zoom-in</p>
<p class="zoom-out">cursor: zoom-out</p>

Source: CSS cursor Property @ W3Schools

0
8

I may be late, but you can try the following code, which worked for me for Drag and Drop.

.dndclass{
    cursor: url('../images/grab1.png'), auto; 

}

.dndclass:active {
    cursor: url('../images/grabbing1.png'), auto;
}

You can use the images below in the URL above. Make sure it is a PNG transparent image. If not, download one from google.

enter image description here enter image description here

0
6

You can create your own cursors and set them as the cursor using cursor: url('path-to-your-cursor');, or find Firefox's and copy them (bonus: a nice consistent look in every browser).

3

The closed hand cursor is not 16x16. If you would need them in the same dimensions, here you have both of them in 16x16 px

opened hand closed hand

Or if you need original cursors:

https://www.google.com/intl/en_ALL/mapfiles/openhand.cur https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.