This property controls the type of cursor that is used when a pointing
device is over an element. Accepts a comma separated list of the below
values. Browsers should attempt to first use the cursor indicated on
the left, working to the right until it has a cursor it can use.
Note: Although the CSS spec says that this property is
inherited, there are some cases in browsers where it is not explicitly so.
Some elements that use a different default cursor (eg: hyperlinks, text entry
elements) will override the parent cursor type by default unless explicitly
set to "inherit".
Allowed Values
inherit
[CSS2|CSS2.1]
[N6|O7|S1.2]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
default
[CSS2|CSS2.1]
[IE4|N6|O7|S1.2]
Type: Explicit
Description:
Browser default cursor. Often an arrow.
auto
[CSS2|CSS2.1]
[IE4|N6|O7|S1.2]
Type: Explicit
Description:
Browser determines what cursor to display according to context.
[URL]
[CSS2|CSS2.1]
[IE6]
Type: Explicit
Description:
URL of a custom cursor to be used for the specified selector.
If multiple URLs are listed for a cursor, the leftmost one
is used. If that is not available, an attempt is made for the
the next one indicated to the right, and so on. If none of
the URL-defined cursors can be used, a generic cursor
indicated at the end of the list is used.
Description:
Used to indicate when an edge of a box is to be moved/re-sized. Values
represent directions relative to up/north.
crosshair
[CSS2|CSS2.1]
[IE4|N6|O7|S1.2]
Type: Explicit
Description:
Usually resembles a plus sign ('+').
pointer
[CSS2|CSS2.1]
[IE6|N6|O7|S1.2]
Type: Explicit
Description:
Used to present an actively selectable element, such as a hyperlink.
move
[CSS2|CSS2.1]
[IE4|N6|O7|S1.2]
Type: Explicit
Description:
Used to indicate when something is movable.
text
[CSS2|CSS2.1]
[IE4|N6|O7|S1.2]
Type: Explicit
Description:
Used to indicate that content is selectable. Often represented using an I-bar.
wait
[CSS2|CSS2.1]
[IE4|N6|O7|S1.2]
Type: Explicit
Description:
Used to indicate that the user must wait because the program
is busy. Usually represented by an hourglass or clock.
help
[CSS2|CSS2.1]
[IE4|N6|O7|S1.2]
Type: Explicit
Description:
Used to indicate that help is available for the element. Often
represented as a question mark or balloon.
hand
[IE4|O7]
Type: Explicit
Description:
Use a hand icon.
all-scroll
[IE6]
Type: Explicit
Description:
Use an up/down/left/right arrow with a dot in the middle. Used to indicate
that content can be scrolled in any direction.
col-resize
[IE6]
Type: Explicit
Description:
Used to indicate that a column can be horizontally re-sized. Represented
with a vertical bar in the middle of two arrows pointing in opposite
left/right directions.
row-resize
[IE6]
Type: Explicit
Description:
Used to indicate that a row or item can be vertically re-sized. Represented
with a horizontal bar in the middle of two arrows pointing in opposite
up/down directions.
no-drop
[IE6]
Type: Explicit
Description:
Used to indicate that a dragged item cannot be dropped at the current
cursor position. Represented as a hand next to a small circle with a
slash through it.
not-allowed
[IE6]
Type: Explicit
Description:
Used to indicate that a requested action can not be performed. Represented
as a circle with a slash through it.
progress
[CSS2.1]
[IE6|O7.2]
Type: Explicit
Description:
Indicates that a process is running in the background, which will not
affect user interaction with the system. Represented as an arrow with
an hourglass next to it.
vertical-text
[IE6]
Type: Explicit
Description:
Used to represent editable vertical content. Represented as a horizontal I-bar.
alias
[N6]
Type: Explicit
Description:
Use a cursor to indicate a shortcut or alias to another object.
Often represented as an arrow with a small curved arrow next to it.
cell
[N6]
Type: Explicit
Description:
Used to indicate that one or more "cells" (as in a spreadsheet) may be
selected. Often rendered as a thick plus-sign, possibly having a dot in
the middle.
copy
[N6]
Type: Explicit
Description:
Used to indicate that content will be copied. Often rendered as an
arrow with a small plus next to it.
count-down
[N6]
Type: Explicit
Description:
Used to indicate a "count-down" operation by a program.
count-up
[N6]
Type: Explicit
Description:
Used to indicate a "count-up" operation by a program.
count-up-down
[N6]
Type: Explicit
Description:
Used to indicate a program is "counting-up" and "counting-down" in succession
operation in a program.
grab
[N6]
Type: Explicit
Description:
Used to indicate that content is "grabbable". Often rendered as an
open hand.
grabbing
[N6]
Type: Explicit
Description:
Used to indicate that content is in the act of being "grabbed". Often
rendered as a closed/clenched hand.
spinning
[N6]
Type: Explicit
Description:
Used to indicate that processing is being done by the program. Slightly
different from the 'wait' value - 'wait' should indicate that no user
interaction with the program is possible while the cursor is in that state,
whereas 'spinning' indicates that the user may still interact with the
program. Sometimes rendered as a spinning, striped ball.
Example
Ext/Doc: blockquote {
cursor: help }
In-Line: <blockquoteSTYLE="cursor:
help">To be or not to be, that is the
question</blockquote>
Notes
CSS2.1 adds the "progress" value.
Browser Peculiarities
Internet Explorer
6.0+:
- Beginning in version 6.0 supports custom cursors via the [URL]
syntax, but it only supports .cur and .ani file types.
Opera
7.0+:
- Even though this property is supposed to be inherited, using "cursor: inherit"
has no effect when it is applied to elements that have their own
default cursor behavior (eg: hyperlinks, some form widgets, etc.)
Safari
1.0-1.1:
- Although proper support for this property did not begin until
Safari 1.2, previous version do appear to do something with this property.
The "auto" and "pointer" values appear to work as expected, while the
following values produce an arrow/pointer icon: progress, all direction values
(with the exception of "w-resize". How odd!), wait, text, move, crosshair and default.