Table of Contents
There are a variety of CSS cursors that can be used to demonstrate the type of operation being performed. For example, a wait cursor would let the user know, there is some processing going on and needs to wait. Likewise, a not-allowed cursor would mean the interaction or operation is not allowed.
List of CSS Cursors
Below are the list of cursors that can be used with CSS.
- alias
- auto
- cell
- col-resize
- copy
- crosshair
- default
- e-resize, ew-resize
- grab
- grabbing
- help
- move
- n-resize, nw-resize, nwse-resize
- no-drop
- none
- not-allowed
- pointer
- progress
- row-resize
- s-resize, se-resize, sw-resize
- text
- url
- w-resize
- wait
- zoom-in, zoom-out
How to use?
Simple HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Cursors</title>
</head>
<body>
<p class="alias"> Alias </p>
<p class="auto"> Auto </p>
<p class="cell"> Cell </p>
<p class="col-resize"> Col-Resize </p>
<p class="copy"> Copy </p>
<p class="crosshair"> Crosshair </p>
<p class="default"> Default </p>
<p class="e-resize"> E-Resize </p>
<p class="grab"> Grab </p>
<p class="grabbing"> Grabbing </p>
<p class="help"> Help </p>
<p class="move"> Move </p>
<p class="n-resize"> N-Resize </p>
<p class="no-drop"> No-Drop </p>
<p class="none"> None </p>
<p class="not-allowed"> Not-Allowed </p>
<p class="pointer"> Pointer </p>
<p class="progress"> Progress </p>
<p class="row-resize"> Row-Resize </p>
<p class="s-resize"> S-Resize </p>
<p class="text"> Text </p>
<p class="w-resize"> W-Resize </p>
<p class="wait"> Wait </p>
<p class="zoom-in"> Zoom In </p>
<p class="zoom-out"> Zoom Out </p>
</body>
</html>CSS to use the cursors
p {
font-size: 2rem;
user-select: all;
}
.alias {
cursor: alias;
}
.auto {
cursor: auto;
}
.cell {
cursor: cell;
}
.col-resize {
cursor: col-resize;
}
.copy {
cursor: copy;
}
.crosshair {
cursor: crosshair;
}
.default {
cursor: default;
}
.e-resize {
cursor: e-resize;
}
.grab {
cursor: grab;
}
.grabbing {
cursor: grabbing;
}
.help {
cursor: help;
}
.move {
cursor: move;
}
.n-resize {
cursor: n-resize;
}
.no-drop {
cursor: no-drop;
}
.none {
cursor: none;
}
.not-allowed {
cursor: not-allowed;
}
.pointer {
cursor: pointer;
}
.row-resize {
cursor: row-resize;
}
.s-resize {
cursor: s-resize;
}
.text {
cursor: text;
}
.w-resize {
cursor: w-resize;
}
.wait {
cursor: wait;
}
.zoom-in {
cursor: zoom-in;
}
.zoom-out {
cursor: zoom-out;
}Video Tutorial
