The caret-color
property is used in CSS to set the color for the blinking cursor we see in HTML text inputs or text areas.
The basic syntax for caret-color
is:
input {
caret-color: <<valueHere>>;
}
Css caret-color examples
For example, if we say:
input {
caret-color: rgb(255, 0, 0);
}
We will get the below output:
We can also use HSL colors for the caret:
input {
caret-color: hsl(0, 50%, 50%);
}
Or any other color syntax such as named colors:
input {
caret-color: red;
}
What is the auto value for caret-color?
The default value for the caret-color property is auto
:
input {
caret-color: auto|<<other_color>>;
}
Setting the caret-color to auto means that it will use the CSS currentColor as the first option. Keep in mind that the user agent can override this and set a different color to ensure good visibility and contrast.
Example of hiding the cursor with caret-color
And speaking of color values, we can completely hide the cursor by setting its color to transparent
:
input {
caret-color: transparent;
}
Keep in mind that hiding the cursor for an input is a very bad practice for accessibility and you should have serious reasons for doing it.
To what elements can I apply caret-color?
We can apply the caret-color property to any of the following HTML elements:
- inputs of types such as text, password, email, number
- text areas
- and also elements with a
contenteditable
attribute set totrue
How about other properties such as CSS caret-width or caret-type?
For the time being, it seems that the caret-color
property is the only one we can use in order to customize the look and feel of the cursor.
However, we can simulate things such as caret-width or caret-type as this CSS tricks example shows.
The caret-color comes as a great companion to the accent-color property for an easy way to set the look and feel of the form elements.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.