cursor

osbo.com | CSS | Properties | 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.

cursor: value;

object.style.cursor = "value";

<'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.

auto

<!doctype html>
<html>
<head>
    <script>
        function mouseover(value) {
            document.body.style.cursor = value;
            var elements = document.getElementsByTagName("input");
            for (var i = 0; i < elements.length; ++i) {
                elements[i].style.cursor = value;
            }
        }
    </script>
</head>
<body>
    <input onmouseover="mouseover(value)" type="button" value="alias">
    <input onmouseover="mouseover(value)" type="button" value="all-scroll">
    <input onmouseover="mouseover(value)" type="button" value="auto">
    <input onmouseover="mouseover(value)" type="button" value="cell">
    <input onmouseover="mouseover(value)" type="button" value="col-resize">
    <input onmouseover="mouseover(value)" type="button" value="context-menu">
    <input onmouseover="mouseover(value)" type="button" value="copy">
    <input onmouseover="mouseover(value)" type="button" value="crosshair">
    <input onmouseover="mouseover(value)" type="button" value="default">
    <input onmouseover="mouseover(value)" type="button" value="e-resize">
    <input onmouseover="mouseover(value)" type="button" value="ew-resize">
    <input onmouseover="mouseover(value)" type="button" value="grab">
    <input onmouseover="mouseover(value)" type="button" value="grabbing">
    <input onmouseover="mouseover(value)" type="button" value="help">
    <input onmouseover="mouseover(value)" type="button" value="move">
    <input onmouseover="mouseover(value)" type="button" value="n-resize">
    <input onmouseover="mouseover(value)" type="button" value="ne-resize">
    <input onmouseover="mouseover(value)" type="button" value="nesw-resize">
    <input onmouseover="mouseover(value)" type="button" value="no-drop">
    <input onmouseover="mouseover(value)" type="button" value="none">
    <input onmouseover="mouseover(value)" type="button" value="not-allowed">
    <input onmouseover="mouseover(value)" type="button" value="ns-resize">
    <input onmouseover="mouseover(value)" type="button" value="nw-resize">
    <input onmouseover="mouseover(value)" type="button" value="nwse-resize">
    <input onmouseover="mouseover(value)" type="button" value="pointer">
    <input onmouseover="mouseover(value)" type="button" value="progress">
    <input onmouseover="mouseover(value)" type="button" value="row-resize">
    <input onmouseover="mouseover(value)" type="button" value="s-resize">
    <input onmouseover="mouseover(value)" type="button" value="se-resize">
    <input onmouseover="mouseover(value)" type="button" value="sw-resize">
    <input onmouseover="mouseover(value)" type="button" value="text">
    <button onmouseover="mouseover(value)" value="url(/assets/png/HappyFace.png), auto">url</button>
    <input onmouseover="mouseover(value)" type="button" value="vertical-text">
    <input onmouseover="mouseover(value)" type="button" value="w-resize">
    <input onmouseover="mouseover(value)" type="button" value="wait">
    <button onmouseover="mouseover(value)" value="url(/assets/png/HappyFace.png) 10 10, auto">x y</button>
    <input onmouseover="mouseover(value)" type="button" value="zoom-in">
    <input onmouseover="mouseover(value)" type="button" value="zoom-out">
    <p>cursor</p>
</body>
</html>

World Wide Web Consortium (W3C)

Syntax

CSS

JS

Values

Initial

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

Links