CSS cursor

The CSS cursor property is used for changing the appearance of your users' cursor (or pointing device) when they point at an element.

Syntax

Possible Values

Image Cursors
url

This value specifies an external or custom cursor to link to. This enables you to create your own cursor from an image. Multiple values can be supplied, if the browser / user agent can't use the first one, it will try the second one etc. A generic cursor keyword should be defined at the end of the list (for example, pointer) in case none of the images can be displayed.

The optional x and y coordinates identify the exact position within the image which is the pointer position (known as "the hotspot").

x
This is an optional value that can be added when using an image cursor. It specifies the x-coordinate of the position in the cursor's coordinate system. This (along with y) allows you to specify the exact position within the image that the pointer position is located.
y
This is an optional value that can be added when using an image cursor. It specifies the y-coordinate of the position in the cursor's coordinate system. This (along with x) allows you to specify the exact position within the image that the pointer position is located.
General Purpose Cursors
auto
Determined by browser/user agent based on the current context. This is text when the pointer is hovering over text, and default in all other cases.
default
Uses the default cursor for the user's platform. This is typically an arrow.
none
No cursor is rendered for the element.
Links and Status Cursors
context-menu
A context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it.
help
Cursor indicates that help is available. This is typically represented as a question mark or balloon.
pointer
Cursor is a pointer that indicates a link.
progress
A 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.
wait
Cursor indicates that the program is busy. This is typically represented as an hour glass or watch.
Selection Cursors
cell
Indicates that a cell or set of cells may be selected. Typically rendered as a thick plus-sign, sometimes with a dot in the middle (like in spreadsheet applications).
crosshair
A simple crosshair. Looks a bit like a + sign. This is typically used to indicate a two dimensional bitmap selection mode.
text
Cursor indicates that text can be selected. Typically rendered as a vertical I-beam.
vertical-text
Cursor indicates that vertical text can be selected. Typically rendered as a horizontal I-beam.
Drag and Drop Cursors
alias
Indicates an alias or shortcut to something that is to be created. Often rendered as an arrow with a small curved arrow next to it.
copy
Indicates something is to be copied. Often rendered as an arrow with a small plus sign next to it or under it.
move
Cursor indicates to the user that the element is to be moved.
no-drop
Indicates 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.
not-allowed
Indicates that the requested action will not be carried out. Often rendered as a circle with a line through it.
grab
Indicates that something can be grabbed (dragged to be moved). Often rendered as the backside of an open hand.
grabbing
Indicates that something is being grabbed (dragged to be moved). Often rendered as the backside of a hand with fingers closed mostly out of view.
Resizing and Scrolling Cursors
e-resize
(East resize) cursor indicates to the user that the element can be resized east.
ne-resize
(North East resize) cursor indicates to the user that the element can be resized north east.
nw-resize
(North West resize) cursor indicates to the user that the element can be resized north west.
n-resize
(North resize) cursor indicates to the user that the element can be resized north.
se-resize
(South East resize) cursor indicates to the user that the element can be resized south east.
sw-resize
(South West resize) cursor indicates to the user that the element can be resized south south west.
s-resize
(South resize) cursor indicates to the user that the element can be resized south south.
w-resize
(West resize) cursor indicates to the user that the element can be resized south west.
ew-resize
(East West resize) cursor indicates to the user that the element can be resized bidirectionally between east and west.
ns-resize
(North South resize) cursor indicates to the user that the element can be resized bidirectionally between north and south.
nesw-resize
(North East, South West resize) cursor indicates to the user that the element can be resized bidirectionally between north east and south west.
nwse-resize
(Nort West, South East resize) cursor indicates to the user that the element can be resized bidirectionally between north west and south west.
col-resize
Indicates that the item/column can be resized horizontally. Typically rendered as arrows pointing left and right with a vertical bar separating them (like in spreadsheet applications).
row-resize
Indicates that the item/row can be resized vertically. Typically rendered as arrows pointing up and down with a horizontal bar separating them (like in spreadsheet applications).
all-scroll
Indicates 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.
Zooming Cursors
zoom-in
Indicates that the user can zoom in to the element (i.e. increase the magnification). Typically rendered as a magnifying glass with a "+" in the center of the glass.
zoom-out
Indicates that the user can zoom out (i.e. reduce the magnification). Typically rendered as a magnifying glass with a "-" in the center of the glass.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
auto
Applies To
All elements
Inherited?
Yes
Media
Visual, Interactive

Example Code

Official Specifications