⑧ Цвет каретки вставки: свойство caret-color

Продолжим изучение темы CSS3 - UI. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Краткая запись внешнего контура: свойство outline
• ② Толщина внешнего контура: свойство outline-width
• ③ Узор внешнего контура: свойство outline-style
• ④ Цвет внешнего контура: свойство outline-color
• ⑤ Смещение внешнего контура: свойство outline-offset
• ⑥ Изменение размера блоков: свойство resize
• ⑦ Стилизация курсора: свойство cursor

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

IE: —
Edge: —
Firefox: 53
Chrome: 57
Safari: 11.2
Opera: 44
iOS Safari: 11.4
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2

Символ каретки является видимым индикатором точки вставки в элементе, в который пользователь вставляет текст (и, возможно, другой контент). Свойство caret-color контролирует цвет этого видимого индикатора.

Свойство наследуется.

caret-color

Значения:

• auto - Браузеры используют currentColor. Браузеры также могут автоматически корректировать цвет каретки, чтобы обеспечить хорошую видимость и контрастность с окружающим контентом, на основе currentColor, фона, теней и т.д. Значение по умолчанию.
• цвет - Каретка вставки окрашивается указанным цветом.
• inherit - Наследует свойство от родительского элемента.
• initial - Устанавливает это свойство в значение по умолчанию.

Синтаксис

CSS

caret-color: auto;
caret-color: transparent;
caret-color: currentColor;
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

Пример

Источник ↗