Computer >> Computer tutorials >  >> Programming >> CSS

Changing the look of Cursor using CSS


We can manipulate cursor image for different elements in a HTML document by using the CSS cursor property.

Syntax

The syntax of CSS cursor property is as follows:
Selector {
   cursor: /*value*/
}

Following are the values for CSS cursor property −

Sr.NoValue & Description
1alias
It indicates an alias of something is to be created
2all-scroll
It indicates that something can be scrolled in any direction
3auto
It is default and the browser sets a cursor
4cell
It indicates that a cell (or set of cells) may be selected
5context-menu
It indicates that a context-menu is available
6col-resize
It indicates that the column can be resized horizontally
7copy
It indicates something is to be copied
8crosshair
It renders as a crosshair
9default
It renders the default cursor
10e-resize
It indicates that an edge of a box is to be moved right (east)
11ew-resize
It indicates a bidirectional resize cursor
12grab
It indicates that something can be grabbed
13grabbing
It indicates that something can be grabbed
14help
It indicates that help is available
15move
It indicates something is to be moved
16n-resize
It indicates that an edge of a box is to be moved up (north)
17ne-resize
It indicates that an edge of a box is to be moved up and right (north/east)
18nesw-resize
It indicates a bidirectional resize cursor
19ns-resize
It indicates a bidirectional resize cursor
20nw-resize
It indicates that an edge of a box is to be moved up and left (north/west)
21nwse-resize
It indicates a bidirectional resize cursor
22no-drop
It indicates that the dragged item cannot be dropped here
23none
No cursor is rendered for the element
24not-allowed
It indicates that the requested action will not be executed
25pointer
It is a pointer and indicates a link
26progress
It indicates that the program is busy (in progress)
27row-resize
It indicates that the row can be resized vertically
28s-resize
It indicates that an edge of a box is to be moved down (south)
29se-resize
It indicates that an edge of a box is to be moved down and right (south/east)
30sw-resize
It indicates that an edge of a box is to be moved down and left (south/west)
31text
It indicates text that may be selected
32URL
A comma separated list of URLs to custom cursors with a generic cursor mentioned at the end as a fail safe
33vertical-text
It indicates vertical-text that may be selected
34w-resize
It indicates that an edge of a box is to be moved left (west)
35wait
It indicates that the program is busy
36zoom-in
It indicates that something can be zoomed in
37zoom-out
It indicates that something can be zoomed out
38initial
It sets cursor property to its default value.
39inherit
It It inherits cursor property from its parent element.

The following is an example to implement CSS cursor property

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 5px;
   float: left;
}
#one {
   background-color: beige;
}
#two {
   background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style></head>
<body>
<div id="one">
<div class="nw-resize">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html>

Output

Changing the look of Cursor using CSS