Revision:
- specifies the mouse cursor to be displayed when pointing over an element.
Property values
alias : the cursor indicates an alias of something is to be created
all-scroll : the cursor indicates that something can be scrolled in any direction
auto : default. The browser sets a cursor
cell : the cursor indicates that a cell (or set of cells) may be selected
col-resize : the cursor indicates that the column can be resized horizontally
context-menu : the cursor indicates that a context-menu is available
copy : the cursor indicates something is to be copied
crosshair : the cursor render as a crosshair
default : the default cursor
e-resize : the cursor indicates that an edge of a box is to be moved right (east)
ew-resize : indicates a bidirectional resize cursor
grab : the cursor indicates that something can be grabbed
grabbing : the cursor indicates that something can be grabbed
help : the cursor indicates that help is available
move : the cursor indicates something is to be moved
n-resize : the cursor indicates that an edge of a box is to be moved up (north)
ne-resize : the cursor indicates that an edge of a box is to be moved up and right (north/east)
nesw-resize : indicates a bidirectional resize cursor
ns-resize : indicates a bidirectional resize cursor
nw-resize : the cursor indicates that an edge of a box is to be moved up and left (north/west)
nwse-resize : indicates a bidirectional resize cursor
no-drop : the cursor indicates that the dragged item cannot be dropped here
none : no cursor is rendered for the element
not-allowed : the cursor indicates that the requested action will not be executed
pointer : the cursor is a pointer and indicates a link
progress : the cursor indicates that the program is busy (in progress)
row-size : the cursor indicates that the row can be resized vertically
s-resize : the cursor indicates that an edge of a box is to be moved down (south)
se-resize : the cursor indicates that an edge of a box is to be moved down and right (south/east)
sw-resize : the cursor indicates that an edge of a box is to be moved down and left (south/west)
text : the cursor indicates text that may be selected
URL : a comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used
vertical-text : the cursor indicates vertical-text that may be selected
w-resize : the cursor indicates that an edge of a box is to be moved left (west)
wait : the cursor indicates that the program is busy
zoom-in : the cursor indicates that something can be zoomed in
zoom-out : the cursor indicates that something can be zoomed out
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
| Cursor Type: | Description: | Test it Out: |
| auto | The UA will determine the cursor to display based on the current context. | TEST |
| cell | The table cell or set of cells can be selected. | TEST |
| crosshair | Cross cursor, often used to indicate selection in a bitmap. | TEST |
| default | The standard arrow is used. | TEST |
| none | No cursor present | TEST |
| pointer | Most often used when hovering over link or button to indicate it can be clicked. | TEST |
| help | Used to indicate help is available | TEST |
| progress | A mashup of pointer and wait - indicates that the UI can still be interacted with while something else is happening... | TEST |
| wait | A mashup of pointer and wait - indicates that the UI can still be interacted with while something else is happening... | TEST |
| text | Tells the user text can be highlighted. | TEST |
| vertical-text | The vertical text can be selected. Typically the shape of a sideways I-beam. | TEST |
| zoom-in | It is used to indicate that something can be zoomed in. | TEST |
| zoom-out | It is used to indicate that something can be zoomed out. | TEST |
<table>
<thead>
<td>Cursor Type:</td>
<td>Description:</td>
<td>Test it Out: </td>
</thead>
<tr>
<td>auto</td>
<td>The UA will determine the cursor to display based on the current context.</td>
<td class="test" id="auto"> TEST </td>
</tr>
<tr>
<td>cell</td>
<td>The table cell or set of cells can be selected.</td>
<td class="test" id="cell"> TEST </td>
</tr>
<tr>
<td>crosshair</td>
<td>Cross cursor, often used to indicate selection in a bitmap.</td>
<td class="test" id="crosshair"> TEST </td>
</tr>
<tr>
<td>default</td>
<td>The standard arrow is used.</td>
<td class="test" id="default"> TEST </td>
</tr>
<tr>
<td>none</td>
<td>No cursor present</td>
<td class="test" id="none"> TEST </td>
</tr>
<tr>
<td>pointer</td>
<td>Most often used when hovering over link or button to indicate it
can be clicked.</td>
<td class="test" id="pointer"> TEST </td>
</tr>
<tr>
<td>help</td>
<td>Used to indicate help is available</td>
<td class="test" id="help"> TEST </td>
</tr>
<tr>
<td>progress</td>
<td>A mashup of pointer and wait - indicates that the UI can still be
interacted withwhile something else is happening...</td>
<td class="test" id="progress"> TEST </td>
</tr>
<tr>
<td>wait</td>
<td>A mashup of pointer and wait - indicates that the UI can still
be interacted with while somethingelse is happening...</td>
<td class="test" id="wait"> TEST </td>
</tr>
<tr>
<td>text</td>
<td>Tells the user text can be highlighted.</td>
<td class="test" id="text"> TEST </td>
</tr>
<tr>
<td>vertical-text</td>
<td>The vertical text can be selected. Typically the shape of a
sideways I-beam.</td>
<td class="test" id="vertical-text"> TEST </td>
</tr>
<tr>
<td>zoom-in</td>
<td>It is used to indicate that something can be zoomed in.</td>
<td class="test" id="zoom-in"> TEST </td>
</tr>
<tr>
<td>zoom-out</td>
<td>It is used to indicate that something can be zoomed out.</td>
<td class="test" id="zoom-out"> TEST </td>
</tr>
</table>
<style>
table, td, th { border: 4px solid burlywood;}
table {width: 100%; border-collapse: collapse;}
thead { width: 100%; background: dodgerblue; }
tr:nth-child(even) {background-color: lightgrey;}
td { width: 32%; height: 2vw; padding: 1vw;}
td.test {color: red; font-weight: bold;}
td#auto {cursor: auto;}
td#cell {cursor: cell;}
td#crosshair {cursor: crosshair;}
td#default {cursor: default;}
td#none {cursor: none;}
td#pointer {cursor: pointer;}
td#help {cursor: help;}
td#progress {cursor: progress;}
td#wait {cursor: wait;}
td#text {cursor: text;}
td#vertical-text {cursor: vertical-text;}
td#zoom-in {cursor: zoom-in;}
td#zoom-out {cursor: zoom-out;}
</style>
alias
all-scroll
auto
cell
col-resize
copy
crosshair
default
e-resize
ew-resize
grab
grabbing
help
move
n-resize
ne-resize
nesw-resize
ns-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
<div class="fixing">
<p class="alias">alias</p>
<p class="all-scroll">all-scroll</p>
<p class="auto">auto</p>
<p class="cell">cell</p>
<p class="context-menu">context-menu</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="ew-resize">ew-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="ne-resize">ne-resize</p>
<p class="nesw-resize">nesw-resize</p>
<p class="ns-resize">ns-resize</p>
<p class="nw-resize">nw-resize</p>
<p class="nwse-resize">nwse-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="se-resize">se-resize</p>
<p class="sw-resize">sw-resize</p>
<p class="text">text</p>
<p class="url">url</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>
</div>
<style>
div.fixing{display: grid; grid-template-columns: repeat(5, auto); gap: 0.1vw;}
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
</style>
<div class="fixing1">
<span style="cursor:auto">auto</span>
<span style="cursor:crosshair">crosshair</span>
<span style="cursor:default">default</span>
<span style="cursor:e-resize">e-resize</span>
<span style="cursor:help">help</span>
<span style="cursor:move">move</span>
<span style="cursor:n-resize">n-resize</span>
<span style="cursor:ne-resize">ne-resize</span>
<span style="cursor:nw-resize">nw-resize</span>
<span style="cursor:pointer">pointer</span>
<span style="cursor:progress">progress</span>
<span style="cursor:s-resize">s-resize</span>
<span style="cursor:se-resize">se-resize</span>
<span style="cursor:sw-resize">sw-resize</span>
<span style="cursor:text">text</span>
<span style="cursor:w-resize">w-resize</span>
<span style="cursor:wait">wait</span>
</div>
<style>
div.fixing1{display: grid; grid-template-columns: repeat(5, auto); gap: 0.1vw;}
.auto {cursor: auto;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
</style>
<style>
div.fixing2{display: grid; grid-template-columns: repeat(4, auto); gap: 0.1vw;}
.cursor { display: flex; flex-wrap: wrap;}
.cursor > div { flex: 22vw ; padding: 1vw .22vw; white-space: nowrap;
border: 1px solid #666; border-radius: 0.5vw; margin: 0 0.5vw 0.5vw 0;}
.cursor > div:hover {background: skyblue; color: darkblue; font-weight: bold;
font-size: 1.25vw;}
.auto {cursor: auto;}
.default {cursor: default;}
.none {cursor: none; }
.context-menu {cursor: context-menu;}
.help {cursor: help;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.wait {cursor: wait;}
.cell {cursor: cell;}
.crosshair {cursor: crosshair;}
.text {cursor: text;}
.vertical-text {cursor: vertical-text;}
.alias {cursor: alias;}
.copy {cursor: copy;}
.move {cursor: move;}
.no-drop {cursor: no-drop;}
.not-allowed {cursor: not-allowed;}
.all-scroll {cursor: all-scroll;}
.col-resize {cursor: col-resize;}
.row-resize {cursor: row-resize;}
.n-resize {cursor: n-resize;}
.e-resize {cursor: e-resize;}
.s-resize {cursor: s-resize;}
.w-resize {cursor: w-resize;}
.ns-resize {cursor: ns-resize;}
.ew-resize {cursor: ew-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.nesw-resize {cursor: nesw-resize;}
.nwse-resize {cursor: nwse-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.zoom-in {cursor: -webkit-zoom-in;cursor: zoom-in;}
.zoom-out {cursor: -webkit-zoom-out;cursor: zoom-out;}
</style>
code:
<div class="custom-cursor">
<div class="card">default</div>
<div class="card card-image-cursor">image</div>
<div class="card card-emoji-cursor">emoji</div>
</div>
<style>
.custom-cursor { display: flex; height: 40vh; align-items: center;
justify-content: center; background: skyblue; padding: 0 1vw;}
.card {width: 15vw; height: 15vw; display: flex; align-items: center;
justify-content: center; background-color: #D29A5A; margin-right:
1vw; color: #fff; font-size: 1.4vw; text-align: center;}
.card-image-cursor {background-color: lightgreen;cursor: url('../../pics/search.png'),
auto;}
.card-emoji-cursor {background-color: #D29B22; cursor: url
("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg'
width='40' height='48' viewport='0 0 100 100' style='fill:black;
font-size:24px;'>
<text y='50%'>🚀</text></svg>") 16 0,auto;/*!emojicursor.app*/}
</style>
code:
<form class="first">
<h3>How are you feeling today?</h3>
<input class="hide" type="checkbox" title="Happy" name="happy" id="happy">
<label for="happy" class="option-happy">Happy</label>
<input class="hide" type="checkbox" title="Sad" name="sad" id="sad">
<label for="sad" class="option-sad">Sad</label>
<input class="hide" type="checkbox" title="Meh" name="meh" id="meh">
<label for="meh" class="option-meh">Meh</label>
</form>
<style>
form {margin-top: 2vw;margin-left:3vw;}
.hide {position: absolute;left: -100vw;}
label {display: inline-block; background: gray; margin: 2vw; position: relative;
width: 10vw; height: 4vw; line-height: 4vw; border-radius: .2vw; font-size: 1vw;
color: #fff; text-align: center; text-decoration: none; box-shadow: 0 2px 5px 0
rgba(0, 0, 0, 0.26);}
#happy ~ .option-happy {cursor: url("../../pics/happy.png"), auto;}
#happy:checked ~ .option-happy {background: green;}
#sad ~ .option-sad {cursor: url("../../pics/sad.png"), auto;}
#sad:checked ~ .option-sad {background: red;}
#meh ~ .option-meh {cursor: url("../../pics/meh.png"), auto;}
#meh:checked ~ .option-meh {background: orange;}
</style>
code:
<form class="second">
<fieldset>
<legend>Custom cursor using CSS</legend>
<h3>Learn</h3>
<input type="button" id="tech1" value="DBMS">
<input type="button" id="tech2" value="Python">
</fieldset>
</form>
<style>
.second { width:100%; margin: 0 auto; text-align: center;}
input[type="button"] {border-radius: 1vw;}
#tech1 {cursor: url("../../pics/dbms.png"), auto;}
#tech2 {cursor: url("../../pics/Python.png"), auto;}
</style>