CSS - cursors

Quiz

CSS cursors are used to modify mouse cursor depending upon user interaction to provide a dynamic effect while browsing webpages. We can use cursor property in CSS to create custom cursors.

For Example:

div{
    cursor: pointer;
}

When the user hovers over any div element, the cursor will change to a hand (pointer) icon.

Types of CSS Cursors
Example of CSS Cursor Types
CSS Custom Cursors
CSS Cursor Multiple Values
CSS All Cursor Types

Types of CSS Cursors

Following are types of cursors we can use in CSS:

General Cursors: This is the default cursor used in operating system.
Links and Status Cursors: This include pointer cursor, loading cursor, wait cursor, progress cursor etc.
Drag and Drop Cursor: This include grab cursor, grabbing cursor, no-drop cursor etc.
Selection Cursor: Text manipulation cursors like text cursor, vertical-text cursor, cross cursor are included in this.
Zooming Cursors: The zoom-in cursor and zoom-out cursor are included here.
Resizing Cursors: The col-resize, row-resize, n-resize are common resizing cursors.

Example of CSS Cursor Types

Here is an example which shows various types of cursors in css.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: inline-block;
            background-color: LightYellow;
            width: 90px;
            height: 90px;
            margin: 10px;
            border: 3px solid #ccc;
            text-align: center;
            font-weight: bold;
        }
    </style>
</head>

<body>
<h1>Hover the mouse on the blocks.</h1>
   <div style="cursor: auto;"> Auto </div>
   <div style="cursor: default;"> Default </div>
   <div style="cursor: crosshair;"> Crosshair </div>
   <div style="cursor: pointer;"> Pointer </div>
   <div style="cursor: move;"> Move </div>
   <div style="cursor: text;"> Text </div>
   <div style="cursor: wait;"> Wait </div>
   <div style="cursor: help;"> Help </div>
   <div style="cursor: not-allowed;"> Not-allowed </div>
   <div style="cursor: progress;"> Progress </div>
   <div style="cursor: alias;"> Alias </div>
   <div style="cursor: copy;"> Copy </div>
   <div style="cursor: no-drop;"> No-drop </div>
   <div style="cursor: e-resize;"> e-resize </div>
   <div style="cursor: n-resize;"> n-resize </div>
   <div style="cursor: ne-resize;"> ne-resize </div>
   <div style="cursor: nw-resize;"> nw-resize </div>
   <div style="cursor: s-resize;"> s-resize </div>
   <div style="cursor: se-resize;"> se-resize </div>
   <div style="cursor: sw-resize;"> sw-resize </div>
   <div style="cursor: w-resize;"> w-resize </div>
   <div style="cursor: ew-resize;"> ew-resize </div>
   <div style="cursor: ns-resize;"> ns-resize </div>
   <div style="cursor: nesw-resize;"> nesw-resize </div>
   <div style="cursor: nwse-resize;"> nwse-resize </div>
   <div style="cursor: col-resize;"> col-resize </div>
   <div style="cursor: row-resize;"> row-resize </div>
   <div style="cursor: zoom-in;"> Zoom-in </div>
   <div style="cursor: zoom-out;"> Zoom-out </div>
   <div style="cursor: grab;"> Grab </div>
   <div style="cursor: grabbing;"> Grabbing </div>
</body>

</html>

CSS Custom Cursors

With CSS, we can also provide over on icons as cursor for a webpage. This example shows how it is done

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: inline-block;
            background-color: LightYellow;
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 3px solid #ccc;
            cursor: url(/css/images/try-it.jpg), pointer;
            text-align: center;
            font-weight: bold;
        }   
    </style>
</head>

<body>
    <h3>Hover the mouse on the block.</h3>
    <div> Custom Cursor </div>
</body>

</html>

CSS Cursor Multiple Values

We can also provide multiple values for cursor elements, so that when one fails to load other will be used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: inline-block;
            background-color: LightYellow;
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 3px solid #ccc;
            cursor: url(/css/images/try-it.jpg), url(/css/images/cursor-text1.png), crosshair;
            text-align: center;
            font-weight: bold;
        }   
    </style>
</head>

<body>
    <h3> Hover the mouse on the block. </h3>
    <div> Custom Cursor </div>
</body>

</html>

Try renaming first image file name to try-it-1.jpg (so that image is not found) and then execute the program. We see the fallback effect, i.e when first image is not found the source, control fallback on second image and that is used as cursor.

CSS All Cursor Types

The following table lists all the types of cursors:

Category	Value	Description
General	auto	The displayed cursor is determined by the user agent based on the current context. This is the default property that the browser uses to define the cursor.
	default	The default cursor, which varies depending on the platform, is usually displayed as an arrow.
	none	There is no cursor displayed.
Links and Status	context-menu	The displayed cursor is context menu cursor, showing there is access to a context menu.
	help	The displayed cursor is help cursor, showing information for assistance is accessible.
	pointer	The displayed cursor is pointer cursor, showing the cursor serves as an indicator pointing to a hyperlink.
	progress	The displayed cursor is progress cursor, showing the program is performing background tasks, allowing the user to maintain interaction with the interface instead of having to wait for its completion.
	wait	The displayed cursor is cursor, The program is currently occupied, and the user cannot engage with the interface, this state is sometimes represented by an image of an hourglass or a watch.
Drag and Drop	alias	The displayed cursor is alias cursor, showing there is need to generate an alias or shortcut.
	copy	The displayed cursor is copy cursor, showing there is a requirement to create a copy of something.
	move	The displayed cursor is move-cursor, showing something can be relocated.
	no-drop	The displayed cursor is no-drop cursor, showing it may not be possible to place the item in its current location.
	not-allowed	The displayed cursor is not-allowed cursor, showing the requested action will not be performed.
	grab	The displayed cursor is grab cursor, showing that can grab the element and can be dragged to relocate it.
	grabbing	The displayed cursor is grabbing cursor, showing something is being held or pulled to facilitate its movement.
Selection	cell	The displayed cursor is cell cursor, showing the option to select the table cell or a group of cells.
	crosshair	The displayed cursor is Crosshair cursor, commonly used to indicate the selection of elements in a bitmap.
	text	The displayed cursor is text cursor, showing you can select the text that is normally indicated by an I-shaped cursor.
	vertical-text	The displayed cursor is veritcal text cursor, showing you can select the vertical text, which is often indicated by a side-aligned I bar.
Zooming	zoom-in	The displayed cursor is zoom-in, showing an object can be enlarged through zooming .
Zooming	zoom-out	The displayed cursor is zoom-out, showing an object can be shrunk through zooming .
Resizing and Scrolling	all-scroll	The displayed cursor is all scroll cursor, can scroll something in any direction, which is also referred to as panning.
	col-resize	The displayed cursor is coloumn-resize cursor, showing element or column may be subject to horizontal resizing, often represented as arrows pointing left and right, separated by a vertical bar.
	row-resize	The displayed cursor is row-resize cursor, showing element or line may be subject to vertical resizing, usually represented by arrows pointing both upward and downward, separated by a horizontal bar.
	n-resize	The displayed cursor is north direction resize cursor, showing north side can be moved or shifted.
	e-resize	The displayed cursor is east direction resize cursor, showing east side can be moved or shifted.
	s-resize	The displayed cursor is south direction resize cursor, showing south side can be moved or shifted.
	w-resize	The displayed cursor is west direction resize cursor, showing west side can be moved or shifted.
	ne-resize	The displayed cursor is north-east resize cursor, showing cursor for bidirectional resizing.
	nw-resize	The displayed cursor is north-west resize cursor, showing cursor for bidirectional resizing.
	se-resize	The displayed cursor is south-east resize cursor, showing cursor for bidirectional resizing.
	sw-resize	The displayed cursor is south-west resize cursor, showing cursor for bidirectional resizing.
	ew-size	The displayed cursor is east-west resize cursor, showing cursor for bidirectional resizing.
	ns-resize	The displayed cursor is north-south resize cursor, showing cursor for bidirectional resizing.
	nesw-resize	The displayed cursor is north-east south-west resize cursor, showing cursor for bidirectional resizing.
	nwse-resize	The displayed cursor is north-west south-east resize cursor, showing cursor for bidirectional resizing.

Print Page

CSS - cursors

Table of Contents

Types of CSS Cursors

Example of CSS Cursor Types

Example

CSS Custom Cursors

Example

CSS Cursor Multiple Values

Example

CSS All Cursor Types