HTML Dog
Skip to navigation

CSS Property: cursor

The appearance of the cursor when it passes over a box.

Possible Values

General Purpose

ValueDescription
autoChanges depending on the situation. Default value.
defaultThe platform’s default cursor. Usually an arrow.
noneNo cursor. Surprisingly.

Links and Status

ValueDescription
pointerIndicates a link. Usually a pointing hand.
helpIndicates that there is help for the object that is being hovered over. There’s usually a question mark involved.
progressIndicates that the program is processing something, but that it can still be interacted with. Commonly an arrow coupled with a timer.
waitIndicates that the user should wait while a program is busy. Commonly a timer.
context-menuIndicates a contextual menu should be expected with the object being hovered over. Usually an arrow with a mini-menu.

Selection

ValueDescription
textIndicates text. Usually an I-beam.
crosshairA thin plus-sign-like cross.
cellIndicates table-like cells. A thick plus-sign-like cross.
vertical-textFor vertical text, astonishingly. Usually a horizontal I-beam.

Resizing and Scrolling

ValueDescription
n-resizeNorth: indicates something that can be moved or resized upwards. Usually an up-pointing arrow.
ne-resizeNorth-east: can be moved upwards and to the right. Usually an up-right-pointing diagonal arrow.
e-resizeEast: can be moved to the right. Usually a right-pointing arrow.
se-resizeSouth-east: can be moved downwards and to the right. Usually a down-right-pointing diagonal arrow.
s-resizeSouth: can be moved downwards. Usually a down-pointing arrow.
sw-resizeSouth-west: can be moved downwards and to the left. Usually a down-left-pointing diagonal arrow.
w-resizeWest: can be moved to the left. Usually a left-pointing arrow.
nw-resizeNorth-west: can be moved upwards and to the left. Usually an up-left-pointing diagonal arrow.
ew-resizeEast + west: two directions: can be moved left or right. Usually a left and right double arrow.
ns-resizeNorth + south: two directions: can be moved up or down. Usually an up and down double arrow.
nesw-resizeNorth-east + south-west: two directions: can be moved up and to the right, or down and to the left. Usually an up-right and down-left double arrow.
nwse-resizeNorth-west + south-east: two directions: can be moved up and to the left, or down and to the right. Usually an up-left and down-right double arrow.
col-resizeAn item, or column, can be resize left or right. Usually a left and right double arrow with a bar in the middle.
row-resizeAn item, or row, can be resized up or down. Usually an up and down double arrow with a bar in the middle.
all-scrollSomething that can be scrolled in any direction. Usually a quadruple arrow, pointing up, right, down, and left.

Drag and Drop

ValueDescription
moveSomething can be moved. Usually a quadruple arrow, pointing up, right, down, and left.
aliasIndicates potential creation of a shortcut. Usually a curved arrow.
copySomething can be copied. Usually an arrow with a “+”.
no-dropSomething dragged that can’t be dropped at the current location. Usually an arrow alongside a circle with a line through.
not-allowedAn action can’t be undertaken. A circle with a line through is usually involved.
grabSomething that can be dragged to be moved. Usually an open hand.
grabbingSomething that is being dragged to be moved. Usually a closed hand.

Zooming

ValueDescription
zoom-inIndicates something that can be magnified. Usually a magnifying glass with a “+”.
zoom-outIndicates something that can be demagnified. Usually a magnifying glass with a “-“.

etc.

ValueDescriptionExample
[URL], [value]A comma-separated list of images to be used as a custom cursor. If the first isn’t found or isn’t compatible, the browser will move on to next in the list. The list should end with one of the above value keywords to act as a fallback.url("narwhal.png"), auto
inherit
initial
unset

Example


abbr { cursor: help; }

Browser support

Can I Use css3-cursors? Data on support for the css3-cursors feature across the major browsers from caniuse.com.

And Can I Use zoom cursors? Data on support for zoom cursors across the major browsers from caniuse.com.

Oh, and Can I Use grab cursors? Data on support for grab cursors across the major browsers from caniuse.com.