NOTICE: This website is no longer updated or supported - as such many of the techniques used to build it may seem antiquated in the modern day. It is preserved for historical reasons only.

HTML XHTML The Complete Reference
home » reference » appendix b » css1 / css2 properties

cursor


This property determines how the cursor displays when passed over the affected element. The auto value leaves the display to be determined by the user agent, so the cursor will display according to either the browser default settings or the user settings. The crosshair value renders the cursor as a simple cross, whereas default displays the system's default cursor (usually an arrow). Various other values listed in the CSS2 specification can indicate that something is a link (pointer), that text can be selected (text), that something can be resized in various directions (e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize), or that the user must wait while a program is busy (wait). Table B-6 details the cursors supported in CSS2. The value url can be used to reference a cursor source; multiple cursor sources can be listed. As with fonts, the user agent should attempt to render the first cursor listed, try the second one if necessary, and ultimately default to the generic cursor value listed last.

Examples


.help {cursor: help;}
p.clickable {cursor: hand;} /* non-standard */
a:longload {cursor: wait;}
p {cursor:url("mything.cur"), url("second.cur"), text; }

Browser and CSS Support Notes


CSS2
IE 5, 5.5, 6
Nav 6, 7
Opera 7

TIP Internet Explorer 6 custom cursor support includes animated cursors. While custom cursors may not be supported in all browsers, a variety of JavaScript tricks are often employed to imitate this CSS2 property.

(X)HTML Elements
CSS Properties
 
CSS Cursor Property Values Description Typical Rendering
auto The browser determines the cursor to display based on the current context. N/A
crosshair A simple crosshair generally resembles a plus symbol.
default The browser's default cursor is generally an arrow.
hand A hand pointer (nonstandard but commonly supported).
move This indicates something is to be moved; usually rendered as four arrows together.
e-resize This indicates resizing as a double arrow pointing east-west (left-right).
ne-resize This indicates resizing as a double arrow pointing northeast-southwest.
nw-resize This indicates resizing as a double arrow pointing northwest-southeast.
n-resize This indicates resizing as a double arrow pointing north-south.
pointer Typically renders similar to the browser's default pointing cursor, which is generally a hand.
se-resize This indicates resizing as a double arrow pointing southeast-northwest.
sw-resize This indicates resizing as a double arrow pointing southwest-northeast.
s-resize This indicates resizing as a double arrow pointing north-south.
w-resize This indicates resizing as a double arrow pointing west-east.
text This indicates text that may be selected or entered; generally rendered as an I-bar.
wait This indicates that the page is busy; generally rendered as an hourglass.
help This indicates that Help is available; the cursor is generally rendered as an arrow and a question mark.
table b-6


  Back: counter-increment/reset Next: direction
< Home | About | Chapters | Examples | Errata | Reference | Site Map >