caret-color¶

Свойство caret-color задает цвет текстового курсора в полях ввода, например, input или textarea.

Демо¶

Интерфейс

Синтаксис¶

/* Keyword values */
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 4% 24% / 0.8);

/* Global values */
caret-color: inherit;
caret-color: initial;
caret-color: revert;
caret-color: revert-layer;
caret-color: unset;

Значения¶

Значение по-умолчанию:

caret-color: auto;

Применяется ко всем элементам

Спецификации¶

CSS Basic User Interface Module Level 3

Поддержка браузерами¶

Can I Use css-caret-color? Data on support for the css-caret-color feature across the major browsers from caniuse.com.

Описание и примеры¶

HTMLCSS

<input value="This field uses a default caret." size="64" />
<input class="custom" value="I have a custom caret color!" size="64" />
<p contenteditable class="custom">
  This paragraph can be edited, and its caret has a custom color as well!
</p>

input {
  caret-color: auto;
  display: block;
  margin-bottom: 0.5em;
}

input.custom {
  caret-color: red;
}

p.custom {
  caret-color: green;
}