HTML5 and CSS3 Advent 2011

What happened to my cursor!?

Setting a custom cursor for certain elements has been around for a while (some cursors worked even in IE 5.5). In CSS3 there are a couple of new cursor styles you can use. Most of them are very usefull, others not so much, but may still come in handy in some edge-cases.

Custom cursor

Hover over the boxes to see the cursor (watch your cursor, not the fade effect).

  • Custom cursor

Examples of CSS2 cursors

  • crosshair
  • pointer
  • default
  • help
  • move
  • e-resize
  • ne-resize
  • nw-resize
  • n-resize
  • se-resize
  • sw-resize
  • s-resize
  • w-resize
  • text
  • wait
  • progress

Examples of CSS3 cursors

  • none
  • context-menu
  • cell
  • vertical-text
  • alias
  • copy
  • no-drop
  • not-allowed
  • col-resize
  • row-resize
  • all-scroll

And some CSS3 cursors which are currently only supported by Firefox and Opera

  • zoom-in
  • zoom-out

How does it work?

This is the simplest technique yet, you just add cursor: not-allowed (or some other fancy cursor) to a css ruleset and you're done! If the mouse cursor is above the matching element(s) it will change to the selected cursor.

If you want to use a custom cursor you can specify an url, just like you would with background images. The custom cursor in the examples is defined as: cursor: url(images/dp-cursor.png), auto;. The auto alternative is required for Firefox as an alternative.

Uses

You might think that "this is cool and all, but what can I use them for?". Here are some use cases:

  • Games (set the cursor to none, or use a custom cursor)
  • Disabled actions (use not-allowed)
  • Drag & drop operations (you could use alias, copy, move)

Show us the source!

Feel free to look around the different source files we used for this example.

Check out our all new HTML & CSS Advent 2012