cursor

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:

See the Pen The Cursors! by Chris Coyier (@chriscoyier) on CodePen.

.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; is 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

Here's the support for the main set from the spec:

Green indicates full support at the version listed (and above). Yellow indicates partial support. Red indicates no support. See Caniuse for full browser support details.

Desktop

ChromeOperaFirefoxIEEdgeSafari
51549145

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
NoNoNoNoNoNo

And for the newer values like zoom-in and zoom-out:

Green indicates full support at the version listed (and above). Yellow indicates partial support. Red indicates no support. See Caniuse for full browser support details.

Desktop

ChromeOperaFirefoxIEEdgeSafari
4*11.62*No123.1*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
NoNoNoNoNoNo

Don't be too concerned about the lack of mobile support there, none of those OS's have cursors!

Comments

  1. User Avatar
    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. User Avatar
    Trav
    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.

    • User Avatar
      Jonathan
      Permalink to comment#

      +1
      Thanks so much Trav. I was going mad that the cursor wasn’t changing. Turns out I had the same issue as you with jQuery.

  3. User Avatar
    Charith Janitha
    Permalink to comment#

    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!

  4. User Avatar
    Adam
    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 :)

    • User Avatar
      Ian Davis
      Permalink to comment#

      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!

    • User Avatar
      Lane
      Permalink to comment#

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

  5. User Avatar
    Mickey
    Permalink to comment#

    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!

  6. User Avatar
    Sten Hougaard
    Permalink to comment#

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

  7. User Avatar
    Kris Baker
    Permalink to comment#

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

  8. User Avatar
    Abhilash Bhattacharjee
    Permalink to comment#

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

  9. User Avatar
    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;
    
  10. User Avatar
    Dharmand
    Permalink to comment#

    demo ?

  11. User Avatar
    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?

  12. User Avatar
    Sten Hougaard
    Permalink to comment#

    @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

  13. User Avatar
    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?

    • User Avatar
      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)

  14. User Avatar
    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?

    • User Avatar
      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?

  15. User Avatar
    Bablu
    Permalink to comment#

    Thanks.

  16. User Avatar
    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!

  17. User Avatar
    Max
    Permalink to comment#

    Thanks!

  18. User Avatar
    hasan
    Permalink to comment#

    Thank you :)

  19. User Avatar
    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

  20. User Avatar
    Garrett
    Permalink to comment#

    Cursor: not-allowed works on IE5 on Mac.

  21. User Avatar
    Cara Pintarku

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

  22. User Avatar
    Andreas

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

  23. User Avatar
    Video bokep indo

    Yes, This very useful tut.

  24. User Avatar
    Michelle
    Permalink to comment#

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

    • User Avatar
      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.

  25. User Avatar
    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.

  26. User Avatar
    Cameron
    Permalink to comment#

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

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

  27. User Avatar
    redcreatives
    Permalink to comment#

    very useful tutorial.. thanks..

  28. User Avatar
    Shashank
    Permalink to comment#

    Any way to lazy load the cursor image?

  29. User Avatar
    Shashank
    Permalink to comment#

    Any way we can lazy load the cursor image?

  30. User Avatar
    Hardeep Singh
    Permalink to comment#

    Well, you missed one cursor name “grab”.

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

  31. User Avatar
    vinay
    Permalink to comment#

    don’t work cursor:grab in chrome.

  32. User Avatar
    Matthew Woodard
    Permalink to comment#

    Thanks for the info! Does this still apply to OSX Yosemite? I can’t seem to get the cursor: pointer; (hand) to work any more.

    Thanks is advance.

  33. User Avatar
    chintan
    Permalink to comment#

    Hi , I implemented custom cursor like:

    $("div1").css({cursor : 'url(../image/image1/cursors/curso.cur), auto'});
    

    This is working fine when I am accessing my page with http as soon as I access my page with https it is not working . It shows default cursor only. I am redirecting my page from http to https. I hav IE10 and windows. I tried to give absolute url also but no luck. Can anyone please help me .

  34. User Avatar
    Alex
    Permalink to comment#

    Would be cool/interesting if the cursor could be set by css. For example, by setting content “Read more” + what font, background & color etc.

    :)

  35. User Avatar
    Sohrab
    Permalink to comment#

    Thanks, it helped.

  36. User Avatar
    Mizan
    Permalink to comment#

    Really this is so effective to know more about cursor in CSS.

  37. User Avatar
    yahya
    Permalink to comment#

    can you help me i went the hand pointer..

  38. User Avatar
    Dee
    Permalink to comment#

    Hi. I’m a Class 9 student and I’ve been trying to customize my cursor with an image in html, but it refuses to work. Can someone help please?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag