Custom CSS Cursors
Using CSS, you can change the default cursor icon associated with a particular element, even specifying your own cursor image (in IE6+) instead. However, with power comes responsibility. Modify the cursor only when it makes sense to, such as when you're applying it to a custom interface. Like popup windows of JavaScript, changing cursors can quickly become counterproductive and irritating to the user.
Below lists all the available values for the CSS property "cursor" (as of CSS2.1):
| Icon | Value | Live example (move mouse over box) | Browser |
| auto | The User Agent determines the cursor to display based on the current context. | All | |
 |
default |
style="cursor:
default;" |
All |
 |
hand |
style="cursor: hand;" |
IE |
|
|
pointer |
style="cursor:
pointer;" |
NS6/ IE6 |
|
|
hand & pointer |
style="cursor: pointer; cursor: hand;" |
Cross browser |
 |
crosshair |
style="cursor:
crosshair;" |
All |
 |
text |
style="cursor: text;" |
All |
 |
wait |
style="cursor: wait;" |
All |
 |
help |
style="cursor: help;" |
All |
| inherit | Takes on its parent element's computed cursor value. | All | |
 |
move |
style="cursor: move;" |
All |
 |
e-resize |
style="cursor:
e-resize;" |
All |
 |
ne-resize |
style="cursor:
ne-resize;" |
All |
 |
nw-resize |
style="cursor:
nw-resize;" |
All |
 |
n-resize |
style="cursor:
n-resize;" |
All |
 |
se-resize |
style="cursor:
se-resize;" |
All |
 |
sw-resize |
style="cursor:
sw-resize;" |
All |
 |
s-resize |
style="cursor:
s-resize;" |
All |
 |
w-resize |
style="cursor:
w-resize;" |
All |
 |
progress |
style="cursor:
progress;" |
IE6 |
 |
all-scroll |
style="cursor:
all-scroll;" |
IE6 |
 |
col-resize |
style="cursor:
col-resize;" |
IE6 |
 |
no-drop |
style="cursor:
no-drop;" |
IE6 |
 |
not-allowed |
style="cursor:
not-allowed;" |
IE6 |
 |
row-resize |
style="cursor:
row-resize;" |
IE6 |
 |
url(uri) |
style="cursor: url(mycursor.cur);" Note: Only .cur and .ani file types are supported as of IE6. |
IE6 |
 |
vertical-text |
style="cursor:
vertical-text;" |
IE6 |
Using the "cursor" property is like with any CSS property- simply apply it to the desired element. Here are a few examples:
Example #1:
<style type="text/css">
body{
cursor: url(mycursor.cur)
}
</style>
This changes the default arrow cursor of a webpage to a custom image instead.
Example #2:
<div style="cursor: move; width: 200px; height: 200px"></div> <a href="help.htm" style="cursor: help;">Help</a>In this second example, the entire DIV has a cursor of "move", and the link that follows, a "help" cursor.
Changing the
cursor dynamically using JavaScript
As if the above isn't enough, you can change the cursor on the fly using JavaScript (as with most CSS properties). Simply use the syntax:
element.style.cursor="new_cursor_value"
Example #3 (disable text selection on the page): This last example disables text selection on the page in IE5+, and to make the process more intuitive, changes the cursor to "not allowed" while the user is dragging the mouse to try and select text:
<body onSelectStart="this.style.cursor='not-allowed'; return false;" onMouseup="this.style.cursor='default'">
And with that we come to an end of the tutorial.
