CSS properties - caret-color

revision:

caret-color property

- specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable.

CSS syntax : caret-color: auto | color | initial | inherit;

Property values

auto : default. Browsers uses the currentColor for the caret

color : specifies a color to use for the caret. All legal color values can be used (rgb, hex, named-color, etc).

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.caretColor="red"

example: caret-color




This paragraph can be edited. Its caret has a custom color as well.

code: 
                    <div>
                        <input value="Default caret color"><br><br>
                        <input class="example1" value="Custom caret color"><br><br>
                        <input class="example2" value="Transparent caret color">
                        <p contenteditable class="example1">This paragraph can be edited. Its caret has 
                        a custom color as well.</p>
                        
                    </div>
                    <style>
                        .example1 {caret-color: red;}
                        .example2 {caret-color: transparent;}
                    </style>