CSS and Cursors
You don’t like the hand cursor that appears over your links? Want arrows denoting where pages are going to open on your page, or help marks appearing on certain links? Well, you’re going to need a few of these classy pointer codes then, which are easy to get through CSS.
This page was last updated on 2012-08-21
Changing the Cursor
You can change the cursor on any element you want, though CSS cursors are used most frequently on links. You can change the cursor on just one link by adding the property via the style attribute:
<a style="cursor: crosshair; ">This link will have a crosshair cursor</a>
If you want to add it to an entire class of links, add this line of CSS to your stylesheet:
a.help {cursor: help; }
Then add the help class to whatever links you’d like to be affected, like so:
<a href="/manual/" class="help">Manual</a>
Table of available cursors
Below is a listing of all of the cursors you can choose from in the CSS specification. Most if not all will be familiar to you. All cursors will be displayed according to your operating system, so Windows users automatically see Windows versions of the icons, for example — you don’t need to do anything special to make them look right for each user. Similarly, if a reader has customised any cursors on their computer, they will see these customised versions too.
Browser Compatibility Note:
These commands are part of CSS2, and are supported by modern browsers like » Firefox, » Safari and » Opera; and in » IE all the way down to version 4. They’re safe to use.
Hover over the examples on the left of the table to see them in action.
| cursor: auto | the default cursor |
|---|---|
| cursor: crosshair | a gunsight-style cross |
| cursor: default | the system’s normal arrow pointer |
| cursor: pointer | the normal hand pointer that appears when you hover over a link |
| cursor: hand | a value that is only supported in IE. Don’t use it, use pointer instead |
| cursor: wait | the waiting cursor, generally a watch or hourglass (non-animated, sadly) |
| cursor: text | the text-selecting 'I-beam' thing |
| cursor: help | an arrow with a question-mark |
| cursor: move | crosshair with arrows on the ends, useful for drag and drop applications |
| cursor: n-resize | an arrow pointing north |
| cursor: ne-resize | an arrow pointing north-east |
| cursor: nw-resize | an arrow pointing north-west |
| cursor: e-resize | an arrow pointing east |
| cursor: w-resize | an arrow pointing west |
| cursor: s-resize | an arrow pointing south |
| cursor: se-resize | an arrow pointing south-east |
| cursor: sw-resize | an arrow pointing south-west |
Custom Cursors
Finally, if all of those cursors aren’t enough for you, you can supply your own custom cursors by uploading the cursor file and pointing to it from in your CSS, just like you would point to an image. Custom cursors work similarly to fonts in CSS: you supply a list of cursors you’d like to use. The browser will try to download and use each cursor in order. If one is not available or unusable, it will fall back on the next one and so on until it reaches a generic cursor at the end of the list which is used if none of the others are available. You code it like this:
a.help {cursor: url(questionmark.svg), url(/cursors/questionmark.cur), help; }
This code will instruct the browser to first look for an SVG file called “questionmark.svg”. If this doesn’t work or the browser doesn’t support SVG graphics, it will look for a .cur file, which is a common cursor format. If neither of these files end up being available, it will fall back to the normal help cursor.
Please make sure you’re using these commands for a good reason. My favourite implementation is to put them in a navigation frame and have them pointing towards the frame their link will open in. You can use a help cursor for links to additional information and definitions. Or how about a special cursor for external links? Classy.
