Introducing the New CSS Cursor Styles in CSS3

The early days of web development were a thrill as new technologies and techniques were discovered. We experienced a few stagnant years in the middle of last decade but, thanks to HTML5, web development has become exciting again. In particular, CSS3 is evolving rapidly and you’ll find some interesting gems in the specifications.

In this article, we’re going to examine the CSS cursor property which, as you’d expect, allows you to change the cursor style as the mouse moves over an element. It’s become increasingly important for interactive web applications…

CSS2 Cursor Styles

CSS2 offered relatively few options (hover over any element to see how the cursor changes):

cursor: auto
cursor: inherit
cursor: crosshair
cursor: default
cursor: help
cursor: move
cursor: pointer 
cursor: progress
cursor: text
cursor: wait
cursor: e-resize
cursor: ne-resize
cursor: nw-resize
cursor: n-resize
cursor: se-resize
cursor: sw-resize
cursor: s-resize
cursor: w-resize

CSS3 Cursor Styles

We have more styles to choose from in CSS3. These work in IE9 and the latest versions of Firefox, Chrome, Safari and Opera except where indicated:

cursor: none (not IE, Safari, Opera)
cursor: context-menu (not Firefox, Chrome)
cursor: cell (not Safari)
cursor: vertical-text
cursor: alias (not Safari)
cursor: copy (not Safari)
cursor: no-drop
cursor: not-allowed
cursor: ew-resize
cursor: ns-resize
cursor: nesw-resize
cursor: nwse-resize
cursor: col-resize
cursor: row-resize
cursor: all-scroll

Browser-Specific Cursors

Mozilla and some editions of Chrome and Safari offer a number of vendor-prefixed cursor styles which are likely to become part of the CSS3 specification:

cursor: -webkit-grab; cursor: -moz-grab;
cursor: -webkit-grabbing; cursor: -moz-grabbing;
cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
cursor: -webkit-zoom-out; cursor: -moz-zoom-out;

Creating Your Own Cursor

Finally, you can create your own cursor graphic, e.g.

cursor: url(images/cursor.cur);
cursor: url(images/cursor.png) x y, auto;

Note:

  1. Internet Explorer requires a Windows cursor file (.cur).
  2. Firefox, Chrome and Safari require an image — I’d recommend a 24-bit alpha-transparent PNG.
  3. Firefox also requires a second non-URL cursor fallback value.
  4. It’s not supported in Opera.
  5. x and y are optional properties in Firefox, Chrome and Safari which define the precise pointer position from the top-left of the graphic. If omitted, 0 0 is assumed.

Nice, but it sounds like too much effort to me! I’ll be sticking with the standard cursor styles…

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

Comments on this article are closed. Have a question about CSS3? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • DDA

    In Safari 5.1.1 the “None”, “Content Menu” and “Cell” all changed the cursor to what looked like an appropriate one.

  • Chris Emerson

    What’s the point in the repeated resize cursors?

    • http://www.optimalworks.net/ Craig Buckler

      While some will be repeated on your OS, that’s not necessarily the case for everyone. In Windows 7 there’s no difference between ns-resize, n-resize and s-resize but there could be in future. Use whichever is most syntactically correct, i.e. if a control can only be moved down, use s-resize.

  • http://www.sdltutorials.com MetaCipher

    The -webkit-grab and -webkit-grabbing don’t work for me in Chrome 16 (Win 7). Perhaps they work in a nightly build?

  • http://keryx.se/ Lars Gunther

    FYI, context-menu works in my Firefox (9.0.1 on Linux)

    • http://www.phpfusion.ro/ kneekoo

      The same for me. Firefox 9.0.1, Linux Mint 12 32-bit.

  • tomByrer

    “Nice, but it sounds like too much effort to me! I’ll be sticking with the standard cursor styles…”

    //source: http://www.useragentman.com/blog/2011/12/21/cross-browser-css-cursor-images-in-depth/
    Change the html tag to this:



    <!–

    Now we can use this CSS to ensure .PNG loads in non-IE browsers:

    html.modern #dragMe {
    cursor: url(‘customMoveCursor.png’) 5 15, /* Modern browsers, hotspot is (5, 15). */
    move; /* Older browsers */
    }

    html.oldIE #dragMe {
    cursor: url(‘customMoveCursor.cur’), /* IE .CUR file loads */
    move; /* In case IE can’t load the above. */
    }

    Might be worth the hassle sometimes.

    • tomByrer

      Oops; conditionals are missing from my post; just follow the link ;)

  • http://www.webmentor.cr/ Marco

    Oi, didn’t know about some of these. Thanks a lot~!!!

  • http://www.sun-mall.jp/ ocaccy

    Hi.
    http://www.okina.co.jp/

    This site has an effect that would like to learn.
    This div on the right; if you move down and / or up, it also moves.
    I can place a fixed div, but I can’t do the effect.
    I think this effect uses javascript and CSS.
    How to do the same effect?

    Thank you,
    ocaccy

  • http://www.itmitica.com/en/ IT Mitică

    “Nice, but it sounds like too much effort to me! I’ll be sticking with the standard cursor styles…”

    Exactly.