Grow your CSS skills. Land your dream job.

cursor

Last updated on:

The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it only is relevant in browsers/operating systems in which there is a mouse and cursor. They are used essentially for UX - as they convey the idea of certain functionality. So try not to break that affordance =).

There are a bunch of them:

Check out this Pen!
.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

You can also have the cursor be an image:

.custom {
   cursor: url(images/my-cursor.png), auto;
}

Some WebKit only cursors:

-webkit-zoom-in
-webkit-zoom-out
-webkit-zoom-grab
-webkit-zoom-grabbing

More Information

Browser Support

Note: cursor: none; not supported until Firefox 3, Safari 5, and Chrome 5. Not at all supported in IE or Opera. Image URL cursors not supported in Opera. The following not supported in IE or Opera: not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize

Chrome Safari Firefox Opera IE Android iOS
Any 1.2+ Any 7+ Any N/A N/A

Comments

  1. richard
    Permalink to comment#

    col-resize not work in chrome, it just disappearred when i was hovering the place which had style like’cursor:col-resize’

  2. Just noticed a small typo:

    .deafult { cursor: default; }

    (.deafult instead of .default)

    Thanks!

  3. Permalink to comment#

    Minor nit here: according to the Moz docs linked above, ‘not-allowed’ is supported for IE6 and above. I only know because I came here in search of a bug fix for this cursor type not appearing in IE when dynamically added via jQuery.

  4. Thank you for this cool way of presenting cursors, now I have a place to come look for the correct cursor if I forget. Always wanted this.

    Cheers!

  5. Permalink to comment#

    Small note about the webkit only cursors

    -webkit-zoom-grab
    -webkit-zoom-grabbing
    

    Don’t exist, the “zoom” part needs to be taken out for these and should be:

    -webkit-grab
    -webkit-grabbing
    

    I find these to be handy when building webkit only web applications :)

    • Adam, how do you change the cursors for the dom elements? I understand the -webkit-grab, but not the -grabbing one. Maybe I have to handle the “ondrag” event if I’m using jQuery UI draggable? Or change the classes in the “start” and “end” events? Thanks!

    • Permalink to comment#

      no he means there is no cursor:-webkit-zoom-grab as it says above. it should be -webkit-grab

  6. Anyone know of a way to make the cursor be actual text? I’ve achieved this using jQuery and a div that tracks the position of the cursor – the only issue is that then the cursor can’t click/hover anything, since the div is blocking everything below it. Any ideas?

    Thanks!

  7. I have made a codepen where I use data:uri to add inline custom cursors: http://codepen.io/netsi1964/full/DsAhE

  8. Thanks! What a handy little reference, saved me some frustration!

  9. Abhilash Bhattacharjee
    Permalink to comment#

    One of the best cursor tuts I have ever seen :-Cheers to Chris

  10. Onisor Cristian
    Permalink to comment#

    Could you give me an example for IE using zoom-in, and zoom-out, since they do work and i haven’t seen any examples here using these:

    cursor: zoom-in; 
    cursor:-webkit-zoom-in;
    cursor:-moz-zoom-in;
    
  11. Permalink to comment#

    demo ?

  12. Ann
    Permalink to comment#

    If I use CSS for changing the cursor image if it goes over a div, it works with a smiley but not with a self-made image with the same image-properties as the smiley (also a gif with reduced colors)… I don’t see the difference… why does the smiley from the web works but not my image?

  13. @Ann I have made a codepen where I have played around with custom cursors. Please note that it is not supportet in general. Custom cursors using data-uri

  14. megadroid
    Permalink to comment#

    Does anyone know what’s the difference between wait and progress? On Safari they look the same. Is it pure semantics?

    • wer
      Permalink to comment#

      On Windows:
      “progress” = cursor + rotating circle = (you can use the page, but it is busy)
      “wait” = rotating circle only = (you cannot use the page)

  15. Keet
    Permalink to comment#

    I created a custom cursor image with the code provided but on front end the cursor has a very thin black outline…is there any way I can remove it?

    • Yannick
      Permalink to comment#

      I also tried to add my custom image cursor with the line of css shown above. Nothing shows up. Are there -webkit-moz-o requirements?

  16. Bablu
    Permalink to comment#

    Thanks.

  17. Scott Smith
    Permalink to comment#

    Hey guys,

    Has anyone experienced an enlarged custom cursor? Like it zooms in ridiculously?

    Any help would be great!
    Thanks!

  18. Max
    Permalink to comment#

    Thanks!

  19. hasan
    Permalink to comment#

    Thank you :)

  20. Shahid
    Permalink to comment#

    i wanted to use the cursor an image.. i write down the url but it didt work. than i saw ur article and i got ma prob solved.. thnx man

  21. Cursor: not-allowed works on IE5 on Mac.

  22. Default cursor works at mozilla 30. Thanks ! Its wonderful …

  23. It should be noted that it doesn’t work on pseudo elements .

  24. Yes, This very useful tut.

  25. Michelle
    Permalink to comment#

    Does anyone know the difference between auto and default? Thank you.

    • Harry
      Permalink to comment#

      The default forces the cursor to the arrow that you see in most ordinary use.
      Auto is what occurs with normal use. It allows the OS (or whoever) to control the cursor’s appearance and will change based on context as it normally does.

      They’ve just missed / forgotten to add the css to the default demo above, so it’s behaving as auto.

  26. Robert Ignat
    Permalink to comment#

    Small issue: the default div doesn’t have the “cursor: default” style applied so when you hover the text, the cursor changes to text cursor type. When cursor: default is applied on an element, it should always be the default arrow cursor.

  27. Permalink to comment#

    Here’s a jsfiddle if you want to see each in demo:

    http://jsfiddle.net/ewhb866y/1/

  28. Permalink to comment#

    very useful tutorial.. thanks..

  29. Shashank
    Permalink to comment#

    Any way to lazy load the cursor image?

  30. Shashank
    Permalink to comment#

    Any way we can lazy load the cursor image?

  31. Hardeep Singh
    Permalink to comment#

    Well, you missed one cursor name “grab”.

    $("tbody tr").css("cursor", "grab");

  32. Mdabuko
    Permalink to comment#

    h1 {
    cursor: url(“Cursor and Fontface\arrow-up-left-24.png”), wait;
    }

  33. Mdabuko
    Permalink to comment#

    My custom cursor still doesn’t work, I still don’t get the arrow.png rendered.

    h1 {
    cursor: url(“Cursor and Fontface\arrow-up-left-24.png”);
    }

    • Permalink to comment#

      Try without the quotes, and correct path to the image:

      cursor: url(images/my-cursor.png), auto;

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".