CSS Cursors

By Nicole Hernandez
2007-01-30


CSS Cursors

One thing that CSS allows us to use for screen presentation are alternate cursors. This is not the idea of downloading or forcing a download of a cursor, as was done in the past (though that is possible as well), but instead, we use several built in concept cursors.

Each of these cursors you can use to enhance useability of your website. For instance, if you want to define that something has context help, you could use the help cursor.

The CSS2 standard gives us 17 options for cursors, plus the option to use an external cursor from a URI. For two of the cursor options, there could have been slightly better phrasing, because it is a touch confusing for some people to remember. Two of the options are auto and default. Now, auto is actually the default value if you don’t explicitly set a cursor to be applied. To the W3C, I imagine this wasn’t a concern because they use the wording ‘initial’ value, instead of ‘default’ value. Unfortunately, in practice, most people tend to say ‘default’ value, instead of ‘initial.’ So, just keep in mind that the ‘default’ value for a cursor is actually ‘auto’ and not ‘default’.

This should help it make a bit more sense:

1. auto - Initial value. Lets the browser choose.
2. default - Displays the basic cursor (usually an arrow).
3. crosshair - A ‘+’ shaped cursor.
4. pointer - A pointer (usally displayed for links).
5. move - Indicates a moveable element (often a 4-way arrow)
6. text - Text can be selected. (often an I-beam)
7. wait - Asks the user to wait (often an hourglass).
8. help - Indicates help is available (often a question mark).
9. progress - Similar to wait but shows that a process is working.
10. e-resize - Indicates a resizeable element. Double-arrows display direction to size.
11. ne-resize - Same as e-resize.
12. nw-resize - Same as e-resize.
13. n-resize - Same as e-resize.
14. se-resize - Same as e-resize.
15. sw-resize - Same as e-resize.
16. s-resize - Same as e-resize.
17. w-resize - Same as e-resize.

I mentioned that there is also the option to use the cursor for an call to a remote cursor. So, let’s say that you have a cursor you would like the browser to use, and you have it stored at a specific location. You could do the following:

<p style="cursor: URL(preferredcursor.cur)">Text</p>


Now, the problem is that not all browsers may be able to load or use that cursor. Let me give an example of one that browsers might have a hard time viewing, and the way you can still set an alternative.

In CSS or Inline:
acroynm { cursor: URL(1.svg), URL(2.cur), help }


The first one (1.svg) is the preferred cursor and if the browser can handle loading and displaying and SVG file, it will do that one. If not, it moves to the second, and tries to load the 2.cur file as the cursor. If it cannot, it will instead display the built-in help cursor.

That is the nice aspect of CSS cursors - they degrade gracefully. If a browser cannot support them, they don’t show, and it does not cause display problems. So, feel free to use the CSS cursors.

Testing the Basic 17

To test whether or not your browser can support them, each of the below list should show the appropriate cursor on hover:

The list is: auto - default - crosshair - pointer - move - text - wait - help - progress - e-resize - ne-resize - nw-resize - n-resize - se-resize - sw-resize - s-resize and w-resize.

So, have fun with the CSS cursors. Not all will show for everyone, but due to the smooth degradation for browsers without support - it is a perfect use of CSS.

Tutorial Pages:
» CSS Cursors

Related Tutorials: » Planning Your Stylesheet - The Definitive Guide » CSS Shorthand Properties » Print Stylesheet - The Definitive Guide » Using CSS Selectors to Highlight Unedited Form Fields » An Introduction to CSS » Overlapping tabbed navigation in CSS