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, фон, тіні та інші чинники.

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

<color>

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

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

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

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

Результат

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

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

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

• Елемент <input>
• Атрибут HTML contenteditable, завдяки якому можна зробити редаговним текст будь-якого елемента
• Тип даних <color>
• Інші властивості, пов'язані з кольором: color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow і column-rule-color