Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is styling text input caret ?
In the text input of the HTML, you can observe the marker showing at the editing position in the text, called the text input caret. Also, it is known as a text input cursor.
In this tutorial, we will learn to style the text input caret. However, we can only change the color of the text input caret as changing shape is not supported by modern browsers.
Syntax
Users can follow the syntax below to use the ‘caret-color’ CSS property to change the color of the text input caret.
caret-color: color;
In the above input, ‘color’ can be the color name in the string format, hexadecimal value, rgb value, or HSL value.
Example 1
In the example below, we have defined two text inputs and given the ‘inp’ and ‘inp1’ class names. We have set the ‘red’ color for the first input element using the ‘caret-color’ CSS property.
Furthermore, we used the ‘auto’ value for the second input element. In the output, users can observe the red cursor in the first input and the black cursor in the second input box, as auto value takes the default color of the browser, which is black in most cases.
<html>
<head>
<style>
.inp {
caret-color: red;
}
.inp1 {
caret-color: auto;
}
</style>
</head>
<body>
<h3>Using the <i> caret-color </i> CSS property to style the text input caret</h3>
<input type = "text" placeholder = "Write something here." class = "inp">
<br> <br>
<input type = "text" placeholder = "Write something here." class = "inp1">
</body>
</html>
Example 2
In the example below, we have used the ‘transparent’ as a value of the ‘color-caret’ CSS property to set the transparent color for the cursor. Basically, we can use it when we require to hide the text input caret.
In the output, users can observe that they are able to write the text in the input box but are not able to see the cursor.
<html>
<head>
<style>
.inp {
caret-color: transparent;
}
</style>
</head>
<body>
<h3>Using the <i> caret-color </i> CSS property to style the text input caret</h3>
<input type = "text" placeholder = "Your Good name" class = "inp">
</body>
</html>
Example 3
In the example below, we have added text inside the div element. After that, we have used the ‘contenteditable’ attribute with a true value for the div element, which makes the content of the div element editable.
Here, we have styled the text input cursor of the editable div element and given it a pink color which users can observe in the output.
<html>
<head>
<style>
.test {
caret-color: pink;
}
</style>
</head>
<body>
<h3>Using the <i> caret-color </i> CSS property to style the text input caret</h3>
<div class = "test" contenteditable = "true">
This div is editable. Click anywhere on the text to start editing. Observe the Pink color of the cursor.
</div>
</body>
</html>
Users learned to style the text input caret using the ‘caret-color’ CSS property. However, some older browsers also support the ‘caret-shape’ property and using that, we can change the shape of the cursor, but modern browsers do not support it.
398 Views
