Style cursor attribute

Definition and Usage

cursor Set or return the cursor type to be displayed for the mouse pointer.

See also:

CSS Reference Manual:cursor attribute

Example

Example 1

Change the cursor:

document.getElementById("myP").style.cursor = "pointer";

Try it yourself

Example 2

Show all available cursors:

var whichSelected = x.selectedIndex;
document.body.style.cursor = x.options[whichSelected].text;

Try it yourself

Example 3

Return the type of cursor:

alert(document.getElementById("myP").style.cursor);

Try it yourself

Syntax

Return the cursor attribute:

object.style.cursor

Set the cursor attribute:

object.style.cursor = value

attribute value

value description
alias The cursor indicates that an alias for something to be created.
all-scroll The cursor indicates that scrolling can be done in any direction.
auto Default. The browser sets the cursor.
cell The cursor indicates that a cell (or a group of cells) can be selected.
context-menu The cursor indicates that a context menu is available.
col-resize The cursor indicates that the column size can be horizontally adjusted.
copy The cursor indicates the content to be copied.
crosshair The cursor is presented as a crosshair.
default Default cursor.
e-resize The cursor indicates that the edge of the box is to be moved to the right (east).
ew-resize Indicates a bidirectional resize cursor.
help The cursor indicates that help is available.
move The cursor indicates what needs to be moved.
n-resize The cursor indicates that the edge of the box is to be moved up (north).
ne-resize The cursor indicates that the edge of the box is to be moved up and to the right (north/east).
nesw-resize Indicates a bidirectional resize cursor.
ns-resize Indicates a bidirectional resize cursor.
nw-resize The cursor indicates that the edge of the box is to be moved up and to the left (north/west).
nwse-resize Indicates a bidirectional resize cursor.
no-drop The cursor indicates that the item to be dragged cannot be placed here.
none The cursor is not presented for the element.
not-allowed The cursor indicates that the requested action will not be executed.
pointer The cursor is a pointer, indicating a link.
progress The cursor indicates that the program is busy (in progress).
row-resize The cursor indicates that the row can be vertically resized.
s-resize The cursor indicates that the edge of the box is to be moved down (south).
se-resize The cursor indicates that the edge of the box is to be moved down and to the right (south/east).
sw-resize The cursor indicates that the edge of the box is to be moved down and to the left (south/west).
text The cursor indicates that the text can be selected.
URL

A comma-separated list of custom cursor URLs.

Note:Always specify a generic cursor at the end of the list to prevent any cursor defined by URL from being used if none is available.
vertical-text The cursor indicates that the vertical text can be selected.
w-resize The cursor indicates that the edge of the box is to be moved to the left (west).
wait The cursor indicates that the program is busy.
zoom-in The cursor indicates that something can be zoomed in.
zoom-out The cursor indicates that something can be zoomed in.
initial Sets this property to its default value. See also initial.
inherit Inherits this property from its parent element. See also inherit.

Technical details

Default value: auto
Return value: The string represents the mouse cursor that is displayed when the mouse pointer hovers over an element.
CSS Version: CSS2

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support