HTML - DOM Style Object caretColor Property

Quiz

HTML DOM Style Object caretColor property is used to set or get the cursor color of any editable element, in inputs or textareas.

Syntax

Set the caretColor property:

object.style.caretColor= "auto | color | initial | inherit";

Get the caretColor property:

object.style.caretColor;

Property Values

Value	Description
auto	It is the default value where browser uses the current color for the caret.
color	It specifies the caret color.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents caret color of an element.

Example of HTML DOM Style Object 'caretColor' Property

The following example sets the cursor color of text area to green from black.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object caretColor Property
    </title>
</head>
<body>
    <button onclick="fun()">Change color</button>
    <br>
    <textarea name="text" id="caret">Hiiii</textarea>
    <script>
        function fun() {
            document.getElementById("caret")
                .style.caretColor = "#04af2f";
        }
    </script>
</body>
</html>

Supported Browsers

Property
caretColor	Yes 57	Yes 79	Yes 53	Yes 11.1	Yes 44

html_dom.htm

Print Page