Style cursor Property
Example
Change the cursor:
document.getElementById("demo").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
| Property | |||||
|---|---|---|---|---|---|
| cursor | Yes | Yes | Yes | Yes | Yes |
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("demo").style.cursor);
Try it Yourself »
Related Pages
CSS reference: cursor property
❮ Style Object
