Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Changing the look of Cursor using CSS

CSS Web Development Front End Technology

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

Syntax

The syntax of CSS cursor property is as follows −

Selector {
   cursor: /*value*/
}

The following are the values for CSS cursor property −

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

The following is an example to implement CSS cursor property

Create a Cursor With Different Shapes

In this example, we have created different cursers using the cursor property with the following values −

cursor: n-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: not-allowed;
cursor: pointer;

Example

Let us now see an example to display a cursor with different shapes −

<!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;}
      .pointer {cursor: pointer;}
   </style>
</head>
<body>
   <h1>Changing the look of cursors</h1>
   <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="pointer">Pointer</div>
   </div>
</body>
</html>

Create a Cursor With no Action

We can easily create a cursor which is visible like no action is requested −

.not-allowed {cursor: not-allowed;}

Example

Let us see an example to display a cursor with no action on an HTML web page −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         margin: 5px;
         float: left;
      }
      #demo {
         background-color: lavender;
      }
      .not-allowed {cursor: not-allowed;}
   </style>
</head>
<body>
   <p>Keep the cursor below...</p>
   <div id="demo">
      <div class="not-allowed">Not-allowed
   </div>
</body>
</html>

Create a Bidirectional Cursor

We will create a bidirectional cursor that appears equivalent to a resize cursor −

.nesw-resize {cursor: nesw-resize;}

Example

Let us see an example to display a bidirectional cursor on an HTML web page −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         margin: 5px;
         float: left;
      }
      #demo {
         background-color: lavender;
      }
      .nesw-resize {cursor: nesw-resize;}
   </style>
</head>
<body>
   <p>Keep the cursor below...</p>
   <div id="demo">
      <div class="nesw-resize">nesw-resize
      </div>
   </div>
</body>
</html>

Create a Cursor That Indicates Text That may be Selected

Use the cursor property with the value text to make a cursor look like a selected text −

.mytext {
   cursor: text;
}

Example

Let us see an example to display a cursor indicating text that may be selected −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         margin: 5px;
         float: left;
      }
      #demo {
         background-color: orange;
      }
      .mytext {cursor: text;}
   </style>
</head>
<body>
   <p>Keep the cursor below...</p>
   <div id="demo">
      <div class="mytext">You can select this text
      </div>
   </div>
</body>
</html>

Create a Cursor That Indicates Text That can be Moved

Use the cursor property with the value move to make a cursor look like the text can be moved −

.mytext {
   cursor: move;
}

Example

Let us see an example to display a cursor indicating text that can be moved −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         margin: 5px;
         float: left;
      }
      #demo {
         background-color: orange;
      }
      .mytext {cursor: move;}
   </style>
</head>
<body>
   <p>Keep the cursor below...</p>
   <div id="demo">
      <div class="mytext">Moving cursor
      </div>
   </div>
</body>
</html>
Updated on: 2023-10-30T14:49:57+05:30

234 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements