CSS Cursor Property Values

April 18th, 2006

The cursor property specifies what type of cursor should be displayed for a pointing device such as a mouse pointer.

Examples of Cursor Property Values

This is a list of the cursor property values.
Rest your mouse over the lines below to see the mouse cursor change:

• Custom (cursor:url(mycursor.cur), pointer in your style sheet)
• Auto (cursor:auto in your style sheet)
• Crosshair(cursor:crosshair in your style sheet)
• Default(cursor:default in your style sheet)
• Pointer(cursor:pointer in your style sheet)
• Move(cursor:move in your style sheet)
• e-resize(cursor:e-resize in your style sheet)
• ne-resize(cursor:ne-resize in your style sheet)
• nw-resize(cursor:nw-resize in your style sheet)
• n-resize(cursor:n-resize in your style sheet)
• se-resize(cursor:se-resize in your style sheet)
• sw-resize(cursor:sw-resize in your style sheet)
• s-resize(cursor:s-resize in your style sheet)
• w-resize(cursor:w-resize in your style sheet)
• text(cursor:text in your style sheet)
• wait(cursor:wait in your style sheet)
• help(cursor:help in your style sheet)

Descriptions of the different values

Value	Description
url	The URL for a user-defined cursor. Note: It is good practice to declare a generic cursor value at the end of the list in case none of the url-declared cursor values are supported used by a user agent(browser) device. The browser retrieves the cursor from the declared URL. If the browser cannot handle the first cursor value in the list of values, it should attempt to handle the second value…and so on. If the user agent cannot handle any URL-defined cursor, it should be able to fall back on the generic cursor declared at the end of the list. Not all browsers support URL-defined values.
default	What value this will be depends on what platform(operating system) is used. An arrow is the most common default value for most platforms. (Not to confuse with the auto value, which is dependent on what browser is used.)
auto	The browser determines what cursor value should be used
crosshair	A crosshair. Looks like a + sign
pointer	This cursor value render as a hand indicating a link
move	This cursor value indicates that something could be moved
e-resize	This cursor value indicates that an east(right) edge of a box is to be moved to the right(Movement starts from the east, east-resize)
ne-resize	This cursor value indicates that a north-east(upper right corner) edge of a box is to be moved upwards and to the right (Movement starts from the north-east, north-east-resize)
nw-resize	This cursor value indicates that a north-west(upper left corner) edge of a box is to be moved upwards and to the left (Movement starts from the north-west, north-west-resize)
n-resize	This cursor value indicates that an edge of a box is to be moved upwards to the north, north-resize
se-resize	This cursor value indicates that the south-east edge of a box is to be moved downwards and to the right, south-east-resize)
sw-resize	This cursor value indicates that an edge of a box is to be moved downwards and to the left(south-west-resize).
s-resize	This cursor value indicates that an edge of a box is to be moved downwards(south-resize)
w-resize	This cursor value indicates that an edge of a box is to be moved to the left (west-resize)
text	This cursor value indicates selectable text
wait	This cursor value indicates the user should wait because the application is busy (often a watch or an hourglass)
help	This cursor value indicates that help is available (often a question mark or a balloon)

How to declare the cursor property

If not new to CSS you can skip this.

To assign a value for the cursor property - and any other styling properties for that matter - you can use an external, internal or inline style sheet.

External Style Sheet

This is how the declaration could look like in an external style sheet(i.e. a style sheet defined in an file with the extension .css which is linked to in the head section of a page)

p {cursor: move}

Internal Style Sheet

This is how the same declaration would look like if declared directly in the head section of a HTML page by using the <style> tag(i.e. internal style sheet).

<head>
<style type="text/css">
p {cursor: move}
</style>
</head>

Inline Style - the style attribute

And last, the same declaration declared inline by using the style attribute in an element.

<html>
<p style="cursor: move">
Paragraph content here...
</p>
</html>

Entry Filed under: CSS

Bookmark with del.icio.us

Digg it?