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
What is styling text input caret ?
In HTML text inputs, you can observe a marker showing at the editing position in the text, called the text input caret. It is also known as a text input cursor. This blinking line indicates where the next character will be inserted when typing.
In this tutorial, we will learn to style the text input caret using CSS. Currently, we can only change the color of the text input caret, as changing the shape is not supported by modern browsers.
Syntax
selector {
caret-color: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Uses the browser's default caret color (usually black) |
color name |
Sets caret to a named color (red, blue, green, etc.) |
hex value |
Sets caret using hexadecimal color (#FF0000, #00FF00) |
rgb() |
Sets caret using RGB values |
transparent |
Makes the caret invisible (hides the cursor) |
Example 1: Colored Caret
The following example demonstrates setting different caret colors for input fields
<!DOCTYPE html>
<html>
<head>
<style>
.red-caret {
caret-color: red;
padding: 10px;
font-size: 16px;
margin: 10px 0;
width: 300px;
}
.blue-caret {
caret-color: #0066CC;
padding: 10px;
font-size: 16px;
margin: 10px 0;
width: 300px;
}
.auto-caret {
caret-color: auto;
padding: 10px;
font-size: 16px;
margin: 10px 0;
width: 300px;
}
</style>
</head>
<body>
<h3>Styling Text Input Caret with Different Colors</h3>
<input type="text" placeholder="Red caret - click to see" class="red-caret"><br>
<input type="text" placeholder="Blue caret - click to see" class="blue-caret"><br>
<input type="text" placeholder="Default caret - click to see" class="auto-caret">
</body>
</html>
Three input fields appear with different caret colors: red, blue, and default black. Click inside each field to see the colored cursor blinking.
Example 2: Transparent Caret (Hidden)
Use transparent value to hide the caret completely. This is useful when creating custom cursor effects
<!DOCTYPE html>
<html>
<head>
<style>
.hidden-caret {
caret-color: transparent;
padding: 15px;
font-size: 18px;
border: 2px solid #ccc;
border-radius: 5px;
width: 350px;
}
</style>
</head>
<body>
<h3>Hidden Caret Example</h3>
<input type="text" placeholder="Type here - no visible cursor" class="hidden-caret">
<p><em>Note: You can still type in the field, but the cursor is invisible.</em></p>
</body>
</html>
An input field appears where you can type text, but the blinking caret is completely invisible.
Example 3: Editable Div with Styled Caret
The caret-color property also works with editable content using the contenteditable attribute
<!DOCTYPE html>
<html>
<head>
<style>
.editable-div {
caret-color: #FF6B6B;
border: 2px dashed #FF6B6B;
padding: 20px;
font-size: 16px;
line-height: 1.5;
background-color: #f9f9f9;
min-height: 100px;
}
</style>
</head>
<body>
<h3>Editable Div with Custom Caret Color</h3>
<div class="editable-div" contenteditable="true">
This div is editable. Click anywhere in this text to start editing and observe the pink caret. You can add, delete, or modify any text here.
</div>
</body>
</html>
An editable div with a pink dashed border appears. Click inside to edit the text and see the pink-colored caret blinking at the cursor position.
Browser Support
The caret-color property is well-supported in modern browsers including Chrome, Firefox, Safari, and Edge. Some older browsers may not support this property and will fall back to the default caret color.
Conclusion
The caret-color CSS property provides a simple way to customize the appearance of text input carets. While you cannot change the caret's shape in modern browsers, color customization helps create cohesive designs and improve user experience.
684 Views
