Open In App
Related Articles

How to hide the insertion caret in a webpage using CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Insertion caret or text input cursor generally refers to a flashing, thin vertical line. It functions in an input field to indicate where the next character typed will be inserted.

If you wish to hide this input cursor from input fields in your webpage, the caret-color property of CSS is used. It has three property values including auto, color, and transparent. In this article, we’ll focus on the transparent value. 

Syntax:

caret-color: transparent;

Example: The following example hides the text input cursor using CSS.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Hide insertion caret</title>
    <style>
        body {
            text-align: center;
        }
  
        .hidden {
            caret-color: transparent;
        }
    </style>
</head>
  
<body>
    <h2 style="color:green;">Welcome To GFG</h2>
    <h2> Visible Input Text Cursor </h2>
    <input type="text"><br><br>
    <h2> Hidden Input Text Cursor Using
        <b>transparent</b> value
    </h2>
    <input type="text" class="hidden">
</body>
  
</html>

                    

Output:

Hide cursor


Last Updated : 01 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads