Custom Cursors
- The benefits of custom cursors.
- The cursor styles.
- How to create your own a custom cursor
When the user mouse over an element on the page, the mouse cursor changes to indicate what the user can (or cannot) do with that element. For example, when hovering over an link, the cursor, by default, changes to a pointing hand (
) to indicate that the link is clickable. When hovering over text, the cursor changes to a vertical bar (
). CSS makes it possible to change these default cursors using the cursor property.
Cursor Styles
The syntax for specifying a cursor property is shown below:
selector { cursor: value; }
The table below shows the most common values used for the cursor property. The cursor images are from Windows Vista. There will be some variation among operating systems.
| Value | FF3 | IE7 | Safari 3 |
|---|---|---|---|
| cursor: default |
|
|
|
| cursor: crosshair |
|
|
|
| cursor: text |
|
|
|
| cursor: wait (see footnote) |
|
|
|
| cursor: help |
|
|
|
| cursor: move |
|
|
|
| cursor: pointer |
|
|
|
| cursor: hand |
|
|
|
| cursor: all-scroll |
|
|
|
| cursor: progress |
|
|
|
| cursor: n-resize (see footnote) |
|
|
|
| cursor: s-resize |
|
|
|
| cursor: e-resize |
|
|
|
| cursor: w-resize |
|
|
|
| cursor: nw-resize |
|
|
|
| cursor: sw-resize |
|
|
|
| cursor: ne-resize |
|
|
|
| cursor: se-resize |
|
|
|
| cursor: col-resize |
|
|
|
| cursor: row-resize |
|
|
|
| cursor: no-drop |
|
|
|
| cursor: not-allowed |
|
|
|
For pointer cursors, specify both the "pointer" and "hand" values for the cursor for best cross-browser support as shown below:
selector {
cursor: pointer;
cursor: hand;
}
Open CssCursors/Demos/cursors.html in your browser to see the behavior of different cursor values.
Custom Cursors
Custom cursors are cursor files with a .cur (for static cursors) or .ani (for animated cursors) extension. They are small graphic files using 256 color depth and usually 16x16, 32x32 or 48x48 pixels in size.
You can find many free custom cursors availabe on the web or you can create your own. The syntax for adding a custom cursor is shown below (see footnote):
selector {
cursor: url(cursors/cursorName.cur);
}
Because not all browsers and operating systems support custom cursors (see footnote), it is important to provide an alternative cursor. In fact, oddly enough, some browsers (e.g, Firefox 3 and Safari 3 on the PC) only display the custom cursor when an alternative cursor is also provided. The syntax for providing an alternative cursor is shown below:
selector {
cursor: url(cursors/cursorName.cur), pointer;
}
Are Custom Cursors Useful?
It is easy to see how custom cursors could be irritating, but in some cases they can be useful. Consider the following scenarios:
- A products site uses custom cursors to distinguish between free and non-free items offered on its website:
- A product review company (whose name begins with "W") uses custom cursors to distinguish between links to its own reviews and links to reviews done by third parties:
- A designer uses a custom cursor to draw attention to links that will open pages in a new window:
The custom cursors shown here are in class files. They were created using Axialis CursorWorkshop from Axialis Software.
Open CssCursors/Demos/CustomCursors.html in your browser to see samples of custom cursors.
The code is shown below:
Code Sample: CssCursors/Demos/CustomCursors.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Cursor</title>
<style type="text/css">
a.w {
cursor:url(w.cur), pointer;
}
a.money {
cursor:url(money.cur), pointer;
}
a[target] {
cursor:url(target.cur), pointer;
}
</style>
</head>
<body>
<ol>
<li><a href="http://www.cnn.com">Normal Link</a></li>
<li><a href="http://www.webucator.com" class="w">Link to review on Webucator's website</a></li>
<li><a href="http://www.money.com" class="money">Link to product that costs money</a></li>
<li><a href="http://www.cnn.com" target="_blank">Link with target attribute</a></li>
</ol>
</body>
</html>
Exercise: Using Custom Cursors
In this exercise you will use custom cursors to indicate correct and incorrect answers to quiz questions.
- Open CssCursors/Exercises/quiz.html in your editor.
- Modify the code so that hovering over a correct answer reveals the right.cur cursor (
) and hovering over the incorrect answer reveals the wrong.cur cursor (
).
Custom Cursors Conclusion
In this lesson of the CSS tutorial, you have learned to modify default cursors on your web pages.
Footnotes
-
The "pointer" value was not supported in Internet Explorer until version 6.
-
The wait cursor appears as an hourglass (
) on most operating systems. -
The resize cursors appear filled (e.g,
) on most operating systems. -
Some documentation for custom cursors shows the URL in parentheses and quotes (e.g, cursor: url("cursors/cursorName.cur"). The W3C site documentation is unclear on which, if either, is preferred, but both seem to work equally well in practice.
-
Custom cursors are well supported on Windows. On Macintosh, they are supported by Safari 3, but not Firefox 3.