Latest web development tutorials
 

Style cursor Property

< Style Object

Example

Change the cursor:

document.getElementById("myP").style.cursor = "pointer";
Try it Yourself »

Definition and Usage

The cursor property sets or returns the type of cursor to display for the mouse pointer.


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The cursor property is supported in all major browsers.


Syntax

Return the cursor property:

object.style.cursor

Set the cursor property:

object.style.cursor=value

Property Values

Value Description
alias The cursor indicates an alias of something is to be created
all-scroll The cursor indicates that something can be scrolled in any direction
auto Default. The browser sets a cursor
cell The cursor indicates that a cell (or set of cells) may be selected
context-menu The cursor indicates that a context-menu is available
col-resize The cursor indicates that the column can be resized horizontally
copy The cursor indicates something is to be copied
crosshair The cursor render as a crosshair
default The default cursor
e-resize The cursor indicates that an edge of a box is to be moved right (east)
ew-resize Indicates a bidirectional resize cursor
help The cursor indicates that help is available
move The cursor indicates something is to be moved
n-resize The cursor indicates that an edge of a box is to be moved up (north)
ne-resize The cursor indicates that an edge of a box is to be moved up and right (north/east)
nesw-resize Indicates a bidirectional resize cursor
ns-resize Indicates a bidirectional resize cursor
nw-resize The cursor indicates that an edge of a box is to be moved up and left (north/west)
nwse-resize Indicates a bidirectional resize cursor
no-drop The cursor indicates that the dragged item cannot be dropped here
none No cursor is rendered for the element
not-allowed The cursor indicates that the requested action will not be executed
pointer The cursor is a pointer and indicates a link
progress The cursor indicates that the program is busy (in progress)
row-resize The cursor indicates that the row can be resized vertically
s-resize The cursor indicates that an edge of a box is to be moved down (south)
se-resize The cursor indicates that an edge of a box is to be moved down and right (south/east)
sw-resize The cursor indicates that an edge of a box is to be moved down and left (south/west)
text The cursor indicates text that may be selected
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
vertical-text The cursor indicates vertical-text that may be selected
w-resize The cursor indicates that an edge of a box is to be moved 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 out
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: auto
Return Value: A String, representing the displayed mouse cursor when the mouse pointer is over an element
CSS Version CSS2

More Examples

Example

Show all available cursors:

var whichSelected = x.selectedIndex;
document.body.style.cursor = x.options[whichSelected].text;
Try it Yourself »

Example

Return the type of cursor:

alert(document.getElementById("myP").style.cursor);
Try it Yourself »

Related Pages

CSS reference: cursor property


< Style Object