CSS caret-color Property

February 10, 2021 12:37 pm IST

You are Here:

CSS caret-color Property

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

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #point { caret-color:red; } </style> </head> <body> <h2>CSS caret-color</h2> <input type="text" id="point" autofocus> </body> </html>

Run

Syntax

Using CSS

element{ caret-color: red; }

Using Javascript

object.style.caretColor="red";

Animatable

No, caret-color property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS caret-color property is auto (Browser dependent). Most of the modern browser uses 'black'.

Property Value

The following table provides a list of values for CSS caret-color property.

Value	Explanation
auto	Browser dependent color.
color	Specifies a color to use for the caret. A color like red, #ff0000, rgb(255,0,0), hsl(0,100%,50%) can be used. Have a look at our color combinator

Using JavaScript

In the following example, we will demonstrate how to change the CSS caret-color property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h2>CSS Caret Color</h2> <input type="text" id="point" autofocus> <button onclick="myFunction()">Click Me</button> <script> function myFunction(){ var x = document.getElementById("point"); x.style.caretColor = "red"; } </script> </body> </html>

Run