CSS Cursor Pointer
What is Cursors in CSS?
Every day, we commonly encounter personalized cursors. This functionality is enabled through the utilization of altered cursors. For example, when hovering over buttons, the default pointer cursor changes to a hand symbol, and when hovering over text, the cursor switches to a text cursor.
Cursors, on the other hand, can also provide users with a range of additional creative possibilities.
We should be aware that CSS already has default cursors for various often-done actions before we start developing our custom cursors.
These pointers offer various choices for interaction at the exact location you are pointing to. Instances include pointers that suggest clicking on links, moving elements by dragging, adjusting the zoom level of objects, and additional functionalities.
Utilize the CSS cursor property to specify the type of cursor desired.
CSS Cursor Property
We can define the type of cursor that is displayed to the user by utilizing the CSS cursor property.
Utilizing images as clickable buttons within forms is a practical implementation of this feature. By default, when a cursor hovers over a link, it typically displays a hand cursor instead of a pointer. Nonetheless, the submit button within a form does not trigger this cursor change. This feature acts as a visual indicator that the image, functioning as a submit button, is interactive whenever a user hovers over it.
This characteristic is determined by zero or multiple <url> attributes listed with commas, succeeded by a mandatory keyword value, with each <url> pointing to the image file.
Syntax
cursor: value;
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 over a series of elements, they can trigger the appearance of a cursor through CSS attributes. Begin by setting up a list of items using the HTML <ul> and <li> tags. Next, apply the CSS property: To enable the cursor to change to a hand icon when hovering over the list, employ the hover effect with 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 will use CSS to change the color of the cursor within input fields. The caret-color property will be employed to modify the cursor's color. This attribute allows customization of the cursor color in textareas, input fields, and similar editable areas.
Syntax
caret-color: auto|color;
Parameters:
- Auto: The default setting is applied, leveraging the latest color supported by the web browser.
- Color: This parameter is employed to define the color value of the caret, supporting various formats such as RGB, hexadecimal, or named colors.
Example
As an example, we can utilize the caret-color property to define the color of the cursor in 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 attribute determines the type of mouse cursor displayed when hovering over an element. By default, the browser shows the pointer cursor. Customization of the cursor can be done using CSS. The default value for the cursor property is 'auto', and specifying 'auto' is not required as it is already the default setting.
Syntax
cursor: value;
Value of Property: It explains the value assigned to the cursor property.
To demonstrate the cursor as a crosshair in this instance, we will assign 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 have the ability to define the type of cursor displayed to users through the CSS cursor property. Leveraging this feature can be particularly handy when using images as submit buttons within forms. Typically, when a cursor hovers over a link, it changes to a hand icon instead of a pointer.