What is styling text input caret ?

Last Updated : 15 May, 2023

CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independently of the HTML that makes up each web page.

In this article, we are going to learn what is styling text input caret-color CSS property.

The insertion caret, the visible marker where the next character typed will be inserted and is also referred to as the text input cursor. It appears only when you want to enter some text into the editor. In HTML it is used with the input element. It is a thin vertical line that flashes to make it more noticeable. By default, it is black, but its colour can be altered with this property.

Syntax:

caret-color: auto|color;

Property values:

auto(default): It has a default value. It uses the current colour in the web browser.
color: It is used to specify the colour value used for the caret. All values can be used (rgb, hex, named-color, etc).

Example: In the below example we have two input boxes. In the top box, the colour of the caret is black but the bottom input box has a caret of red colour.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>CSS filter property</title>
     
    <style>
        body{
            text-align:center;
            background-color:lightgrey;        
        }
        img {
            filter: brightness(30%);
            margin-top:60px;
            width:80%;        
        }
 
        input {
          caret-color: auto;
          display: block;
          margin-bottom: .5em;
        }
     
        input.custom {
          caret-color: red;
        }
 
        p.custom {
          caret-color: green;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <div>
        <input value="click here"
               size="84"/> 
        <br><br>
        <input class="custom"
               value="click here"
               size="84"/>
        <p contenteditable class="custom">
        </p>
 
    </div>
</body>
</html>

Output Gif:

Example 2: In this example, we will use transparent as a value of the caret-color CSS property.

HTML

<html>
<head>
    <style>
        .custom {
            caret-color: transparent;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
 
    <input type="text" class="custom">
 
</body>
</html>