CSS cursor property

Property values

auto

The shape of cursor depends upon the type of context. There will be text cursor over editable text field.

cursor: auto;

Try it { }

default

The default cursor is arrow.

cursor: default;

Try it { }

none

There is no cursor for the context.

cursor: none;

Try it { }

context-menu

An arrow with a menu type graphic.

cursor: context-menu;

Try it { }

help

question mark like icon is present under the arrow.

cursor: help;

Try it { }

pointer

pointer icon represents a link.

cursor: pointer;

Try it { }

progress

represents the program is in progress mode.

cursor: progress;

Try it { }

wait

The program is busy and user should wait.

cursor: wait;

Try it { }

cell

represents selected data of cells. It looks like a thick cell.

cursor: cell;

Try it { }

crosshair

indicates two dimensional bitmap selection. It looks like a thin cell.

cursor: crosshair;

Try it { }

text

indicates the selection of horizontal text. It looks like a vertical I shape.

cursor: text;

Try it { }

vertical-text

It indicates the selection of vertical text. It looks like horizontal I shape.

cursor: vertical-text;

Try it { }

alias

indicates shortcut to something. It consists of small curved arrow next to the cursor arrow.

cursor: alias;

Try it { }

copy

indicates something is to be copied.

cursor: copy;

Try it { }

move

The object is moveable or being dragged.

cursor: move;

Try it { }

no-drop

The required action can not be carried at the cursor location.

cursor: no-drop;

Try it { }

not-allowed

The dragged object can't be place at the cursor location.

cursor: not-allowed;

Try it { }

grab

The object is draggable.

cursor: grab;

Try it { }

e-resize

The purpose of the *-resize values is to move the edge.

cursor: e-resize;

Try it { }

n-resize

north cursor

cursor: n-resize;

Try it { }

ne-resize

north-east cursor

cursor: ne-resize;

Try it { }

nw-resize

north-west cursor

cursor: nw-resize;

Try it { }

s-resize

south cursor

cursor: s-resize;

Try it { }

se-resize

south-east cursor

cursor: se-resize;

Try it { }

sw-resize

south-west cursor

cursor: sw-resize;

Try it { }

w-resize

west cursor

cursor: w-resize;

Try it { }

ew-resize

east-west cursor

cursor: ew-resize;

Try it { }

ns-resize

north-south cursor

cursor: ns-resize;

Try it { }

nesw-resize

north-east-south-west bidirection cursor.

cursor: nesw-resize;

Try it { }

nwse-resize

north-west-south-east bidirection cursor.

cursor: nwse-resize;

Try it { }

col-resize

column resizable

cursor: col-resize;

Try it { }

row-resize

row resizable

cursor: row-resize;

Try it { }

all-scroll

It indicates that an object can be scrolled.

cursor: all-scroll;

Try it { }

zoom-in

magnifying glass with +ve sign.

cursor: zoom-in;

Try it { }

zoom-out

magnifying glass with -ve sign.

cursor: zoom-out;

Try it { }