Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

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

CSS Web Development Front End Technology

The insertion caret is a blinking vertical line that appears in text input fields to indicate where text will be inserted. This visual indicator helps users know the current text insertion point. Using CSS, you can control the appearance of this caret, including making it completely invisible.

Syntax

selector {
    caret-color: value;
}

Possible Values

Value Description
auto Browser default caret color (usually black)
transparent Makes the caret invisible
color Any valid CSS color value (red, #ff0000, rgb(255,0,0))

Example: Hiding the Insertion Caret

The following example demonstrates how to hide the caret using caret-color: transparent 

<!DOCTYPE html>
<html>
<head>
<style>
    .normal-input {
        padding: 10px;
        margin: 10px;
        border: 2px solid #ddd;
        border-radius: 5px;
    }
    
    .hidden-caret {
        caret-color: transparent;
        padding: 10px;
        margin: 10px;
        border: 2px solid #ddd;
        border-radius: 5px;
    }
    
    .container {
        text-align: center;
        padding: 20px;
    }
</style>
</head>
<body>
    <div class="container">
        <p>Normal input field with visible caret:</p>
        <input type="text" class="normal-input" placeholder="Click here to see caret">
        
        <p>Input field with hidden caret:</p>
        <input type="text" class="hidden-caret" placeholder="Click here - no visible caret">
    </div>
</body>
</html>

Two input fields appear: the first shows a normal blinking caret when clicked, while the second field appears to have no caret even though text can still be typed.

Example: Custom Caret Colors

You can also change the caret color instead of hiding it 

<!DOCTYPE html>
<html>
<head>
<style>
    .red-caret {
        caret-color: red;
        padding: 10px;
        margin: 5px;
        border: 1px solid #ccc;
    }
    
    .blue-caret {
        caret-color: #0066cc;
        padding: 10px;
        margin: 5px;
        border: 1px solid #ccc;
    }
    
    .invisible-caret {
        caret-color: transparent;
        padding: 10px;
        margin: 5px;
        border: 1px solid #ccc;
    }
</style>
</head>
<body>
    <h3>Different Caret Colors</h3>
    <input type="text" class="red-caret" placeholder="Red caret"><br>
    <input type="text" class="blue-caret" placeholder="Blue caret"><br>
    <input type="text" class="invisible-caret" placeholder="No caret">
</body>
</html>

Three input fields with different caret appearances: red caret, blue caret, and no visible caret.

Applies To

The caret-color property works with these HTML elements

  • <input> elements (text, password, search, email, etc.)
  • <textarea> elements
  • Elements with contenteditable="true"

Conclusion

The caret-color property provides an easy way to hide or customize the insertion caret in web forms. Setting it to transparent makes the caret invisible while preserving full text input functionality.

Updated on: 2026-03-15T15:43:25+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements