caret-color

Властивість CSS caret-color (колір каретки) задає колір каретки вставлення, видимого маркера в місці, куди буде вставлено наступний набраний символ. Його іноді називають курсором текстового введення. Каретка з'являється в елементах штибу <input> або тих, що мають атрибут contenteditable. Зазвичай вона є тонкою вертикальною лінією, яка блимає, щоб бути більш помітною. Усталено вона чорна, але її колір можна змінити за допомогою цієї властивості.

Спробуйте його в дії

Зверніть увагу на те, що каретка вставлення — це лише один з типів каретки. Наприклад, у багатьох браузерах є «навігаційна каретка», яка діє подібно до каретки вставлення, але може переміщуватися по нередаговному тексту. З іншого боку, зображення курсора миші, яке відображається при наведенні на текст, для якого властивість cursor має значення auto, або при наведенні на елемент, для якого властивість cursor має значення text або vertical-text, попри те, що воно іноді подібне до каретки, нею не є (це курсор).

Синтаксис

/* Значення – ключові слова */
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor;

/* Значення <color> */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 4% 24% / 80%);

/* Глобальні значення */
caret-color: inherit;
caret-color: initial;
caret-color: revert;
caret-color: revert-layer;
caret-color: unset;

Значення

auto

Користувацький агент обирає відповідний колір для каретки. Зазвичай це currentcolor, але користувацький агент може обрати інший колір, щоб забезпечити хорошу видимість і контрастність щодо навколишнього вмісту, враховуючи значення currentcolor, фон, тіні та інші чинники.

Примітка: Попри те, що користувацькі агенти можуть використовувати значення currentcolor (яке зазвичай анімується) для значення auto, auto не інтерполюється в переходах та анімаціях.

<color>

Колір каретки.

Формальне визначення

Початкове значенняauto
Успадковуєтьсятак
Обчислене значенняauto is computed as specified and <color> values are computed as defined for the color property.

Формальний синтаксис

auto | <color>

де
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

де
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
<lab()> = lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
<lch()> = lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

де
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Приклади

Задання власного кольору каретки

HTML

<input value="Це поле використовує усталену каретку." size="64" />
<input class="custom" value="Я маю особливий колір каретки!" size="64" />
<p contenteditable class="custom">
  Цей абзац можна редагувати, і його каретка також має особливий колір!
</p>

CSS

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

input.custom {
  caret-color: red;
}

p.custom {
  caret-color: green;
}

Результат

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
caret-color
Chrome Full support 57
Edge Full support 79
Firefox Full support 53
Internet Explorer No support No
Opera Full support 44
Safari Full support 11.1
WebView Android Full support 57
Chrome Android Full support 57
Firefox for Android Full support 53
Opera Android Full support 43
Safari on iOS Partial support 11.3
footnote
Samsung Internet Full support 7.0

Дивіться також