CSS Cursors


The cursor property specifies the type of cursor to be displayed when pointing on an element.

Syntax

cursor:value;
Value Description Code Output
alias The cursor indicates an alias of something is to be created cursor:alias; Alias
all-scroll The cursor indicates that something can be scrolled in any direction cursor:all-scroll; All Scroll
auto Default. The browser sets a cursor cursor:auto; Auto
cell The cursor indicates that a cell (or set of cells) may be selected cursor:cell; Cell
col-resize The cursor indicates that the column can be resized horizontally cursor:col-resize; Col Resize
copy The cursor indicates something is to be copied cursor:copy; Copy
crosshair The cursor render as a crosshair cursor:crosshair; Crosshair
default The default cursor cursor:default; Default
e-resize The cursor indicates that an edge of a box is to be moved right (east) cursor:e-resize; E-resize
ew-resize Indicates a bidirectional resize cursor cursor:ew-resize; Ew-resize
help The cursor indicates that help is available cursor:help; Help
move The cursor indicates something is to be moved cursor:move; Move
n-resize The cursor indicates that an edge of a box is to be moved up (north) cursor:n-resize; N Resize
ne-resize The cursor indicates that an edge of a box is to be moved up and right (north/east) cursor:ne-resize; Ne Resize
nesw-resize Indicates a bidirectional resize cursor cursor:nesw-resize; Nesw Resize
ns-resize Indicates a bidirectional resize cursor cursor:ns-resize; Ns Resize
nw-resize The cursor indicates that an edge of a box is to be moved up and left (north/west) cursor:nw-resize; Nw Resize
nwse-resize Indicates a bidirectional resize cursor cursor:nwse-resize; Nwse Resize
no-drop The cursor indicates that the dragged item cannot be dropped here cursor:no-drop; No Drop
none No cursor is rendered for the element cursor:none; None
not-allowed The cursor indicates that the requested action will not be executed cursor:not-allowed; Not Allowed
pointer The cursor is a pointer and indicates a link cursor:pointer; Pointer
progress The cursor indicates that the program is busy (in progress) cursor:progress; Progress
row-resize The cursor indicates that the row can be resized vertically cursor:row-resize; Row Resize
s-resize The cursor indicates that an edge of a box is to be moved down (south) cursor:s-resize; S Resize
se-resize The cursor indicates that an edge of a box is to be moved down and right (south/east) cursor:se-resize; Se Resize
sw-resize The cursor indicates that an edge of a box is to be moved down and left (south/west) cursor:sw-resize; Sw Resize
text The cursor indicates text that may be selected cursor:text; Text
vertical-text The cursor indicates vertical-text that may be selected cursor:vertical-text; Vertical Text
w-resize The cursor indicates that an edge of a box is to be moved left (west) cursor:w-resize; W Resize
wait The cursor indicates that the program is busy cursor:wait-resize; Wait
zoom-in The cursor indicates that something can be zoomed in cursor:zoom-in; Zoom In
zoom-out The cursor indicates that something can be zoomed out cursor:zoom-out; Zoom Out

Example

<html>
     <head>
        <style type="text/css">
        span{
        cursor:pointer;
        }
        </style>
        </head>
        <body>
        <span>Pointer Cursor</span>
     </body>
    </html>
Output
Pointer Cursor

Share this article on