Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Change Cursor Color with CSS caret-color
The CSS caret-color property allows you to change the color of the text cursor (caret) in editable elements like input fields and textareas. This property enhances the visual design of forms by customizing the cursor to match your website's color scheme.
Syntax
selector {
caret-color: value;
}
Possible Values
| Value | Description |
|---|---|
color |
Any valid CSS color value (name, hex, rgb, etc.) |
auto |
Browser default color (usually black) |
transparent |
Makes the caret invisible |
Example 1: Changing Input Field Cursor Color
The following example demonstrates how to change the cursor color in an input field −
<!DOCTYPE html>
<html>
<head>
<style>
form {
padding: 20px;
margin: 20px;
text-align: center;
background-color: #f5f5f5;
border-radius: 8px;
}
input {
font-size: 18px;
caret-color: #ff6b6b;
padding: 10px;
border: 2px solid #ddd;
border-radius: 4px;
margin: 10px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<input type="text" value="Click here to see red cursor!" />
<br>
<button type="button">Submit</button>
</form>
</body>
</html>
A form with an input field appears. When you click inside the input field, the text cursor displays in red color instead of the default black.
Example 2: Changing Textarea Cursor Color
This example shows how to apply caret-color to a textarea element −
<!DOCTYPE html>
<html>
<head>
<style>
form {
padding: 20px;
margin: 20px;
background-color: #e8f4fd;
border-radius: 8px;
}
textarea {
width: 100%;
height: 100px;
caret-color: #2196F3;
padding: 10px;
border: 2px solid #ddd;
border-radius: 4px;
font-family: Arial, sans-serif;
font-size: 14px;
}
.invisible-caret {
caret-color: transparent;
background-color: #ffe0e0;
}
</style>
</head>
<body>
<form>
<p>Blue cursor:</p>
<textarea placeholder="Type here to see blue cursor"></textarea>
<p>Invisible cursor:</p>
<textarea class="invisible-caret" placeholder="Cursor is hidden here"></textarea>
</form>
</body>
</html>
Two textarea fields appear. The first shows a blue cursor when clicked, and the second has an invisible cursor (transparent) making it appear as if there's no cursor.
Conclusion
The caret-color property is a simple way to customize the appearance of text cursors in form elements. Use color values to match your design or transparent to hide the cursor completely for unique user interfaces.
Updated on: 2026-03-15T15:28:52+05:30
2K+ Views
Advertisements