caret-color CSS

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

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

auto

Наследуется:
Да
Применяется:

ко всем элементам

Анимируется:
Да
Спецификации:
Поддержка браузерами:

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

Синтаксис

/* 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: hsla(228, 4%, 24%, 0.8);

Примеры

HTML

<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>

CSS

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

input.custom {
  caret-color: red;
}


p.custom {
  caret-color: green;
}