CSS cursor Property
The cursor property defines the type of mouse cursor when the mouse pointer is over the element.
The cursor is defined as zero or more comma-separated <url> values, followed by a keyword value. Each of these <url>s must indicate an image file. The browser will fall back to the next image if it can’t load up the first specified image. If the browser can’t find any image, it will fall back to the keyword value.
The -webkit- property extension is added to show some values for Safari, Google Chrome, and Opera (newer versions).
| Initial Value | auto |
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | object.style.cursor = "cell"; |
Syntax¶
cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | URL | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbingExample of the cursor property:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
text-align: center;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
.auto {
cursor: auto;
}
.help {
cursor: help;
}
.cursor {
display: flex;
flex-wrap: wrap;
}
.cursor > div {
flex: 120px;
padding: 10px 2px;
white-space: nowrap;
border: 2px solid #666;
border-radius: 20px;
margin: 0 5px 5px 0;
}
.cursor > div:hover {
background: #eee;
}
</style>
</head>
<body>
<h2>Cursor property example</h2>
<div class="cursor">
<div class="auto">auto</div>
<div class="help">help</div>
</div>
</body>
</html>Here is an example with all the values of cursor property. The -webkit- extention is added for "zoom-in", "zoom-out", "grab" and "grabbing" values.
Example of the cursor property property with the "zoom-in", "zoom-out", "grab" and "grabbing" values:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
text-align: center;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
.cursor {
display: flex;
flex-wrap: wrap;
}
.cursor > div {
flex: 120px;
padding: 10px 2px;
white-space: nowrap;
border: 2px solid #666;
border-radius: 20px;
margin: 0 5px 5px 0;
}
.cursor > div:hover {
background: #eee;
}
.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>
</head>
<body>
<h2>Cursor property example</h2>
<p> Hover the mouse cursor over the element to see the changes</p>
<div class="cursor">
<div class="auto">auto</div>
<div class="default">default</div>
<div class="none">none</div>
<div class="context-menu">context-menu</div>
<div class="help">help</div>
<div class="pointer">pointer</div>
<div class="progress">progress</div>
<div class="wait">wait</div>
<div class="cell">cell</div>
<div class="crosshair">crosshair</div>
<div class="text">text</div>
<div class="vertical-text">vertical-text</div>
<div class="alias">alias</div>
<div class="copy">copy</div>
<div class="move">move</div>
<div class="no-drop">no-drop</div>
<div class="not-allowed">not-allowed</div>
<div class="all-scroll">all-scroll</div>
<div class="col-resize">col-resize</div>
<div class="row-resize">row-resize</div>
<div class="n-resize">n-resize</div>
<div class="s-resize">s-resize</div>
<div class="e-resize">e-resize</div>
<div class="w-resize">w-resize</div>
<div class="ns-resize">ns-resize</div>
<div class="ew-resize">ew-resize</div>
<div class="ne-resize">ne-resize</div>
<div class="nw-resize">nw-resize</div>
<div class="se-resize">se-resize</div>
<div class="sw-resize">sw-resize</div>
<div class="nesw-resize">nesw-resize</div>
<div class="nwse-resize">nwse-resize</div>
<div class="grab">grab</div>
<div class="grabbing">grabbing</div>
<div class="zoom-in">zoom-in</div>
<div class="zoom-out">zoom-out</div>
</div>
</body>
</html>Example of the cursor property with the "url" value:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.cursor {
display: inline-block;
width: 30px;
height: 30px;
cursor: url("/uploads/media/default/0001/04/6388ec92938ec31c9f019a249174f683118b55d6.png"), auto;
}
</style>
</head>
<body>
<h2>Cursor property example</h2>
<p> Hover the mouse cursor over the element to see the changes</p>
<i class="cursor">Icon</i>
</body>
</html>Values¶
| Value | Description | |
|---|---|---|
| auto | It means that the browser will set a cursor. It is the default value of this property. | |
| default | It is the default cursor. | |
| none | It means that there is no cursor rendered for the element. | |
| context-menu | The cursor indicates that a context-menu is available. | |
| help | The cursor indicates that help is available. | |
| pointer | The cursor indicates a link as a pointer. | |
| progress | The cursor indicates that program is busy or in progress. | |
| wait | The cursor indicates that the program is busy. | |
| cell | It means that the cursor will indicate that a cell or set of cells may be selected. | |
| crosshair | The cursor will be rendered as a crosshair. | |
| text | The cursor indicates text which may be selected. | |
| URL | A comma separated list of URLs to custom cursors. | |
| vertical-text | The cursor indicates vertical text which can be selected. | |
| alias | It means that the cursor will indicate an alias of something is to be created. | |
| copy | The cursor indicates something which can be copied. | |
| move | The cursor indicates that something can be moved. | |
| no-drop | The cursor indicates that the dragged item cannot be dropped here. | |
| not-allowed | The cursor indicates that the requested action will not be executed. | |
| all-scroll | It means that the cursor will indicate something can be scrolled in any direction. | |
| col-resize | The cursor indicates that the column can be resized horizontally. | |
| row-resize | The cursor indicates that the row can be resized vertically. | |
| n-resize | The cursor indicates that an edge of a box is to be moved up. | |
| s-resize | The cursor indicates that an edge of a box is to be moved down. | |
| e-resize | The cursor indicates that an edge of a box is to be moved right. | |
| w-resize | The cursor indicates that an edge of a box is to be moved left. | |
| ns-resize | The cursor indicates a bidirectional resize cursor. | |
| ew-resize | The cursor indicates a bidirectional resize cursor. | |
| ne-resize | The cursor indicates that an edge of a box is to be moved up and right. | |
| nw-resize | The cursor indicates that an edge of a box is to be moved up and left. | |
| se-resize | The cursor indicates that an edge of a box is to be moved down and right. | |
| sw-resize | The cursor indicates that an edge of a box is to be moved down and left. | |
| nesw-resize | The cursor indicates a bidirectional resize cursor. | |
| nwse-resize | The cursor indicates a bidirectional resize cursor. | |
| zoom-in | The cursor indicates that something can be zoomed in. | |
| zoom-out | The cursor indicates that something can be zoomed out. | |
| grab | The cursor indicates that something can be grabbed. | |
| grabbing | The cursor indicates that something can be grabbed. | |
| initial | It makes the property use its default value. | |
| inherit | It inherits the property from its parent's element. |
0 Comments
CAN FEEDBACK
Emoji