Skip to content
Related Articles

Related Articles

What is styling text input caret ?

Improve Article
Save Article
  • Last Updated : 06 Jun, 2022
Improve Article
Save Article

 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 independent of the HTML that makes up each web page.

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

The insertion caret, the visible marker where the next character typed will be inserted and this 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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!