CSS cursor Property

Example

Some different cursors:

span.crosshair {
    cursor: crosshair;
}

span.help {
    cursor: help;
}

span.wait {
    cursor: wait;
}

Definition and Usage

The cursor property specifies the type of cursor to be displayed when pointing on an element.

Default value:	auto
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS2
JavaScript syntax:	object.style.cursor="crosshair" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
cursor	5.0	5.5	4.0	5.0	9.6

CSS Syntax

cursor: value;

Property Values

Value	Description	Play it
alias	The cursor indicates an alias of something is to be created	Play it »
all-scroll	The cursor indicates that something can be scrolled in any direction	Play it »
auto	Default. The browser sets a cursor	Play it »
cell	The cursor indicates that a cell (or set of cells) may be selected	Play it »
context-menu	The cursor indicates that a context-menu is available	Play it »
col-resize	The cursor indicates that the column can be resized horizontally	Play it »
copy	The cursor indicates something is to be copied	Play it »
crosshair	The cursor render as a crosshair	Play it »
default	The default cursor	Play it »
e-resize	The cursor indicates that an edge of a box is to be moved right (east)	Play it »
ew-resize	Indicates a bidirectional resize cursor	Play it »
grab	The cursor indicates that something can be grabbed	Play it »
grabbing	The cursor indicates that something can be grabbed	Play it »
help	The cursor indicates that help is available	Play it »
move	The cursor indicates something is to be moved	Play it »
n-resize	The cursor indicates that an edge of a box is to be moved up (north)	Play it »
ne-resize	The cursor indicates that an edge of a box is to be moved up and right (north/east)	Play it »
nesw-resize	Indicates a bidirectional resize cursor	Play it »
ns-resize	Indicates a bidirectional resize cursor	Play it »
nw-resize	The cursor indicates that an edge of a box is to be moved up and left (north/west)	Play it »
nwse-resize	Indicates a bidirectional resize cursor	Play it »
no-drop	The cursor indicates that the dragged item cannot be dropped here	Play it »
none	No cursor is rendered for the element	Play it »
not-allowed	The cursor indicates that the requested action will not be executed	Play it »
pointer	The cursor is a pointer and indicates a link	Play it »
progress	The cursor indicates that the program is busy (in progress)	Play it »
row-resize	The cursor indicates that the row can be resized vertically	Play it »
s-resize	The cursor indicates that an edge of a box is to be moved down (south)	Play it »
se-resize	The cursor indicates that an edge of a box is to be moved down and right (south/east)	Play it »
sw-resize	The cursor indicates that an edge of a box is to be moved down and left (south/west)	Play it »
text	The cursor indicates text that may be selected	Play it »
URL	A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used	url(myBall.cur),auto">Play it »
vertical-text	The cursor indicates vertical-text that may be selected	Play it »
w-resize	The cursor indicates that an edge of a box is to be moved left (west)	Play it »
wait	The cursor indicates that the program is busy	Play it »
zoom-in	The cursor indicates that something can be zoomed in	Play it »
zoom-out	The cursor indicates that something can be zoomed out	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

HTML DOM reference: cursor property

❮ Previous Next ❯

CSS Reference