CSS Cursor Pointer

What is Cursors in CSS?

Every day, we already use customized cursors. This interaction is made possible by using modified cursors, such as when you hover over buttons, the pointer cursor transforms into a hand, or when you hover over the text and the cursor transforms into a text cursor.

Cursors, however, may also be used to give our users various additional creative opportunities.

We should be aware that CSS already has default cursors for various often-done actions before we start developing our custom cursors.

These cursors provide options for action at the precise spot you are hovering over. Examples include cursors that indicate you should click links, drag and drop elements, zoom in and out of objects, and more.

Use the CSS cursor property to describe the kind of cursor you want.

CSS Cursor Property

We may specify the kind of cursor that should be shown to the user using the CSS cursor property.

Using photos as submit buttons on forms is a useful application of this capability. By default, a hand appears instead of a pointer when a cursor is above a link. However, a form's submit button does not cause it to change form. This serves as a visual cue that the picture is clickable anytime someone hovers over an image that is a submit button.

This property is specified by zero or more <url> values separated by commas, followed by one keyword value as required, and each <url> will refer to the image file.

Syntax

Property Values

Auto: The default setting for this attribute is to place the cursor.
Alias: This attribute is used to show the cursor's creation-related indicator.
All-scroll: The cursor in this attribute denotes scrolling.
Cell: The cursor in this property indicates that a cell or group of cells is currently chosen.
Context-menu: The cursor in this attribute shows the presence of a context menu.
Col-resize: When the cursor is above a column in this property, it may be resized horizontally.
Copy: The cursor in this property indicates that something has to be copied.
Crosshair: The cursor appears as a crosshair in this attribute.
Default: The default cursor.
E-resize: The cursor in this attribute indicates that a box's right-hand edge should be moved.
Ew-resize: The cursor in this attribute represents a bidirectional resizing cursor.
Help: In this property, the cursor shows that assistance is accessible.
Move: The pointer in this property implies that something has to be moved
. n-resize: When using the n-resize property, the pointer shows that a box's upper boundary should be shifted.
Ne-resize: With this property, the cursor shows that a box's edge should be shifted to the right and up.
New-resize: The bidirectional resize cursor is indicated by this attribute.
Ns-resize: A bidirectional resize cursor is indicated by the attribute ns-resize.
Nw-resize: The cursor in this attribute shows that a box's upper and lower edges are to be moved up and left.
Nose-resize: The bidirectional resize cursor is indicated by this attribute.
No-drop: The cursor in this attribute indicates that the pulled object cannot be dumped in this location.
None: A cursor is not displayed for the element according to this attribute.
Not-allowed: The cursor in this property indicates that the requested action won't be carried out.
Pointer: The cursor in this property serves as a pointer and displays link progress.
Progress: The cursor in this attribute shows that the program is active.
Row-resize: The cursor shows that this feature allows for vertical row resizing.
S-resize: When using this property, the pointer shows that a box's bottom boundary should be lowered.
Se-resize: The cursor in this attribute indicates that a box's edge should be shifted to the right and down.
Sw-resize: The cursor in this attribute indicates that a box's left and lower edges should be moved.
Text: The cursor in this attribute denotes text that may be chosen.
URL: This property contains a list of custom cursor URLs separated by commas and a generic cursor at the end of the list.
Vertical-text: The cursor in this attribute shows possible vertical-text selections.
W-resize: When using this property, the pointer shows that a box's left edge should be moved.

Example

This example shows how to utilize the cursor property. The program is busy since the cursor property's value is set to wait.

<!DOCTYPE html>
<html>
<head>
<title> CSS cursor property </title>
<style>
.wait {
cursor: wait;
}
h1 {
color: red;
}
</style>
</head>

<body>
<center>
<h1>Welcome to the page</h1>
<p>To change the mouse cursor, move the mouse over the text</p>

<p class="wait">wait until next suggestion</p>

</center>
</body>
</html>

Output

How can CSS bring the Cursor to the Hand when a User Hovers over a List Item?

When a user hovers their mouse over a list of items, a cursor may be created using CSS properties. Using the HTML <ul> and <li> tags, first construct a list of the objects, and then utilize the CSS property: To make the cursor and hand hover over the list of objects, use hover to cursor:grab.

Syntax

element:hover {
    cursor:grab/pointer;
}

Example

<!DOCTYPE html>
<html>
<head>
<title>make our cursor as hand</title>
<style>
body {
width:90%; 
}
h1 {
color:red;
text-align:center;
}
li:hover{
cursor:grab;
}
</style>
</head>
<body>
<h1>Welcome to the course list</h1>
<div class = "sub">Course Lists:</div>
<ul>
<li>CSE</li>
<li>ECE</li>
<li>IT</li>
<li>MECH</li>
<li>CIVIL</li>
<li>AI</li>
<li>EEE</li>
</ul> 
</body>
</html>

Output

How can We Alter the Color of Our Cursor Using CSS?

Here, we'll utilize CSS to alter the cursor's color in the input fields. We will utilize the caret-color attribute to alter the cursor's color. The cursor's color for textareas, input fields, and other editable places can be changed using this attribute.

Syntax

Parameters:

Auto: The value is set by default. It takes advantage of the web browser's most recent color.
Color: It's used to specify the caret's color value. Any value (RGB, hex, named-color, etc.) may be utilized.

Example

As an illustration, let's use the caret-color property to set the cursor color for input fields.

<!DOCTYPE html>
<html lang="en">
<head>
<title>
Changing the color of the cursor using CSS
</title>

<style>
body {
text-align: center;
}
/* Change the cursor color to red */
input[type="text"] {
caret-color: red;
}

/* Change the cursor color to blue */
input[type="email"] {
caret-color: blue;
}
</style>
</head>

<body>
<h1 style="color: black;">
Welcome to the page
</h1>

<h3>
Changing the color of the cursor using CSS
</h3>

<form action="">
<label for="name">Enter Your Name</label>
<input type="text" name="name" id="">
<br><br>

<label for="mail">Enter You Email</label>
<input type="email" name="mail" id="">
</form>
</body>

</html>

Output

How can We Use CSS to Change the Cursor Style in a Browser?

In CSS, the cursor property is used to specify the kind of mouse cursor that will be shown when the mouse is hovered over an element. The browser's default setting for the cursor is the pointer. Additionally, CSS may be used to customize it if necessary. The cursor property's default setting is 'auto'. Additionally, adding the value auto to the cursor property is optional because it is already set to auto by default.

Syntax

Property Value: It describes the cursor property's value.

Example: To display the cursor as a crosshair in this example, we will set the cursor property value to 'cursor: crosshair'.

<!DOCTYPE html>
<html>

<head>
<style>
.cursor {
cursor: crosshair;
}
</style>
</head>

<body style="text-align:left;">
<h1 style="color:red;">
Welcome to the page
</h1>
<p class="cursor">
Login Credentials
</p>
</body>
</html>

Output

We may specify the kind of cursor that should be shown to the user using the CSS cursor property. Using photos as submit buttons on forms is a useful application of this capability. By default, a hand appears instead of a pointer when a cursor is above a link.

Next TopicCSS Buttons

← prev next →