cursor

The cursor CSS property specifies the type of cursor to display for the pointing device when the cursor's hotspot is within the element's border edge.

Syntax

CSS

cursor: value;

JS

object.style.cursor = "value";

Values

<'cursor'> = [ [<url> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ] ]
<url> = url( <string> <url-modifier>* )
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

<x>

The x coordinate.

<y>

The y coordinate.

auto

Automatically specified by the user agent.

default

The platform-dependent default cursor.

none

No cursor is rendered.

context-menu

A context menu is available for the object under the cursor.

help

Help is available for the object under the cursor.

pointer

A pointer that indicates a link.

progress

A progress indicator.

wait

Indicates that the program is busy and the user should wait.

cell

Indicates that a cell or set of cells may be selected.

crosshair

A simple crosshair.

text

Indicates text that may be selected.

vertical-text

Indicates vertical-text that may be selected.

alias

Indicates an alias of/shortcut to something is to be created.

copy

Indicates something is to be copied.

move

Indicates something is to be moved.

no-drop

Indicates that the dragged item cannot be dropped at the current cursor location.

not-allowed

Indicates that the requested action will not be carried out.

grab

Indicates that something can be grabbed.

grabbing

Indicates that something is being grabbed.

e-resize

Indicates that the edge is to be moved east.

n-resize

Indicates that the edge is to be moved north.

ne-resize

Indicates that the edge is to be moved north-east.

nw-resize

Indicates that the edge is to be moved north-west.

s-resize

Indicates that the edge is to be moved south.

se-resize

Indicates that the edge is to be moved south-east.

sw-resize

Indicates that the edge is to be moved south-west.

w-resize

Indicates that the edge is to be moved west.

ew-resize

Indicates that the edge is to be moved east-west.

ns-resize

Indicates that the edge is to be moved north-south.

nesw-resize

Indicates that the edge is to be moved north-east-south-west.

nwse-resize

Indicates that the edge is to be moved north-west-south-east.

col-resize

Indicates that the item/column can be resized horizontally.

row-resize

Indicates that the item/row can be resized vertically.

all-scroll

Indicates that the something can be scrolled in any direction.

zoom-in

Indicates that something can be zoomed in.

zoom-out

Indicates that something can be zoomed out.

Initial

auto

Examples

alias

all-scroll

auto

cell

col-resize

context-menu

copy

crosshair

default

e-resize

ew-resize

grab

grabbing

help

move

n-resize

ne-resize

nesw-resize

no-drop

none

not-allowed

ns-resize

nw-resize

nwse-resize

pointer

progress

row-resize

s-resize

se-resize

sw-resize

text

url

vertical-text

w-resize

wait

x y

zoom-in

zoom-out

JS

World Wide Web Consortium (W3C)

Home Menu