CSS cursor Property

Topic: CSS3 Properties ReferencePrev|Next

Description

The cursor CSS property specifies the type of cursor to be displayed when the pointer is placed over an element.

The following table summarizes the usages context and the version history of this property.

Syntax

The syntax of the property is given with:

The example below shows the cursor property in action.

h1 {
    cursor: copy;
}
p {
    cursor: help;
}
a {
    cursor: url("custom.gif"), url("custom.cur"), default;
}

The cursor property handles a comma-separated list of user-defined cursors values followed by the "generic cursor". If the first cursor is specified incorrectly or can't be found, the next cursor in the comma-separated list will be used, and so on until a usable cursor is found.

If none of the user-defined cursors is valid or supported by the browser, the generic cursor at the end of the list will be used instead. Learn more.

Property Values

The following table describes the values of this property.

Value	Look	Description
General
auto		The browser determines the cursor to display based on the current context. E.g. equivalent to text when hovering text. This is default.
default		The default cursor for the platform, without regard for the context, typically an arrow.
none		No cursor is rendered.
initial		Sets this property to its default value.
inherit		If specified, the associated element takes the computed value of its parent element cursor property.
Links & status Cursors
context-menu		Indicates that a context-menu is available.
help		Indicates that help is available.
pointer		A cursor that indicates a link, typically a hand with an extended index finger.
progress		A progress indicator. The program is performing some processing but the user can still interact with the interface (unlike for wait).
wait		Indicates that the program is busy and the user should wait.
Selection Cursors
cell		Indicates that a cell (or set of cells) can be selected.
crosshair		A simple crosshair. Often used to indicate selection in a bitmap.
text		Indicates text that can be selected, typically an I-beam.
vertical-text		Indicates that vertical text can be selected, a sideways I-beam.
Drag and Drop Cursors
alias		Indicates that an alias or shortcut is to be created.
copy		Indicates that something can be copied.
move		Indicates that the hovered object can be moved.
no-drop		Indicates that the dragged item cannot be dropped at the current location.
not-allowed		Indicates that something cannot be done.
Resizing & scrolling Cursors
all-scroll		Indicates that something can be scrolled in any direction (panned).
col-resize		Indicates that the column can be resized horizontally.
row-resize		Indicates that the row can be resized vertically.
n-resize		Indicates that some edge is to be moved up (north).
e-resize		Indicates that some edge is to be moved right (east).
s-resize		Indicates that some edge is to be moved down (south).
w-resize		Indicates that some edge is to be moved left (west).
ne-resize		Indicates that some edge is to be moved up and right (north/east).
nw-resize		Indicates that some edge is to be moved up and left (north/west).
se-resize		Indicates that some edge is to be moved down and right (south/east).
sw-resize		Indicates that some edge is to be moved down and left (south/west).
ew-resize		Indicates a bidirectional resize cursor.
ns-resize
nesw-resize
nwse-resize
Zoom and Grab Cursors
zoom-in		Indicates that something can be zoomed in.
zoom-out		Indicates that something can be zoomed out.
grab		Indicates that something can be grabbed (dragged to be moved).
grabbing		Indicates that something is grabbed.

Browser Compatibility

The cursor property is supported in all major modern browsers.

Basic Support— Firefox 1+ Google Chrome 1+ Internet Explorer 4+ Apple Safari 1.2+ Opera 7+

Further Reading

See tutorial on: CSS Cursors.