Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS | caret-color Property

  • Last Updated : 05 Nov, 2021

This property is used to set the color of the cursor in inputs, text area, or other editable areas.


Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

caret-color: auto|color;

Default Value: 

  • auto

Property values:  

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

Below examples illustrate the caret-color property in CSS: 



<!DOCTYPE html>
        <title>caret-color property</title>
            body {
                text-align: center;
            .geeks {
                caret-color: red;
            .gfg {
                caret-color: transparent;
        <h1 style="color:green;">GeeksForGeeks</h1>
        <h1>The caret-color Property</h1>
        <input value="geeksforgeeks"><br><br>
        <input class="geeks" value="C programming">
        <input class="gfg" value="Java programming">
        <p contenteditable class="geeks">
         A computer science portal for geeks


Supported Browsers: The browser supported by caret-color property are listed below:  

  • Google Chrome 57.0 and above
  • Internet Explorer: Not supported
  • Mozilla 53.0 and above
  • Opera 44.0 and above
  • Safari 11.1 and above


My Personal Notes arrow_drop_up
Recommended Articles
Page :