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:
- Internet Explorer requires a Windows cursor file (.cur).
- Firefox, Chrome and Safari require an image — I’d recommend a 24-bit alpha-transparent PNG.
- Firefox also requires a second non-URL cursor fallback value.
- It’s not supported in Opera.
- 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…
