Перейти к содержанию

caret-color

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

Демо

Интерфейс

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
/* 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;

Значения

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

1
caret-color: auto;

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

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

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

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

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

1
2
3
4
5
<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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
input {
  caret-color: auto;
  display: block;
  margin-bottom: 0.5em;
}

input.custom {
  caret-color: red;
}

p.custom {
  caret-color: green;
}

Комментарии