CSS property: cursor

Description

The type of cursor to be displayed for the pointing device

This property specifies the type of cursor to be displayed for the pointing device.

Syntax

CSS 2

cursor: [ <uri>, ]* <system>;

CSS 3

cursor: [ <uri> [ <x> <y> ]? , ]* <system>;

Values

<uri>

The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it must attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the cursor keyword at the end of the list. The optional <x> and <y> coordinates identify the exact position within the image which is the pointer position (i.e., the hotspot).

<x>

The x-coordinate of the position in the cursor's coordinate system (left/top relative) which represents the precise position that is being pointed to.

<y>

The y-coordinate of the position in the cursor's coordinate system (left/top relative) which represents the precise position that is being pointed to.

<system>

System cursor.

aliasIndicates an alias of/shortcut to something is to be created. Often rendered as an arrow with a small curved arrow next to it.
all-scrollIndicates that the something can be scrolled in any direction. Often rendered as arrows pointing up, down, left, and right with a dot in the middle.
auto (by default)The UA determines the cursor to display based on the current context.
cellIndicates that a cell or set of cells may be selected. Often rendered as a thick plus-sign with a dot in the middle.
context-menuA context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it.
copyIndicates something is to be copied. Often rendered as an arrow with a small plus sign next to it.
col-resizeIndicates that the item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
crosshairA simple crosshair (e.g., short line segments resembling a "+" sign). Often used to indicate a two dimensional bitmap selection mode.
defaultThe platform-dependent default cursor. Often rendered as an arrow.
helpHelp is available for the object under the cursor. Often rendered as a question mark or a balloon.
moveIndicates something is to be moved.
no-dropIndicates that the dragged item cannot be dropped at the current cursor location. Often rendered as a hand or pointer with a small circle with a line through it.
noneNo cursor is rendered for the element.
not-allowedIndicates that the requested action will not be carried out. Often rendered as a circle with a line through it.
pointerThe cursor is a pointer that indicates a link.
progressA progress indicator. The program is performing some processing, but is different from wait in that the user may still interact with the program. Often rendered as a spinning beach ball, or an arrow with a watch or hourglass.
row-resizeIndicates that the item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
textIndicates text that may be selected. Often rendered as a vertical I-beam. User agents may automatically display a horizontal I-beam/cursor (e.g. same as the vertical-text keyword) for vertical text, or for that matter, any angle of I-beam/cursor for text that is rendered at any particular angle.
vertical-textIndicates vertical-text that may be selected. Often rendered as a horizontal I-beam.
waitIndicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.
n-resizeIndicates that the north edge is to be moved.
w-resizeIndicates that the west edge is to be moved.
s-resizeIndicates that the south edge is to be moved.
e-resizeIndicates that the east edge is to be moved.
nw-resizeIndicates that the north-west corner is to be moved.
ne-resizeIndicates that the north-east corner is to be moved.
sw-resizeIndicates that the south-west corner is to be moved.
se-resizeIndicates that the south-east corner is to be moved.
ew-resizeIndicates a bidirectional resize cursor.
ns-resizeIndicates a bidirectional resize cursor.
nesw-resizeIndicates a bidirectional resize cursor.
nwse-resizeIndicates a bidirectional resize cursor.

Versions

Examples

h1 {
    cursor: pointer;
}