caret-color

Baseline Широко распространённый

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Свойство caret-color CSS задаёт цвет вставки курсора, видимого маркера, куда будет вставлен следующий набранный символ. Иногда это называют курсором ввода текста. Курсор отображается в элементах, таких как <input> или тех, у которых есть атрибут contenteditable. Как правило, курсор представляет собой тонкую вертикальную линию, которая мигает, чтобы сделать его более заметным. По умолчанию он чёрный, но его цвет можно изменить с помощью этого свойства.

Попробовать

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

Синтаксис

/* 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% / 80%);

/* Global values */
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` вычисляется как указано, и значения `<color>` вычисляются как определено для свойства `color`.
Тип анимации	цвет цвета

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

caret-color = 
  auto     |
  <color>

Примеры

Установка пользовательского цвета курсора

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: 0.5em;
}

input.custom {
  caret-color: red;
}

p.custom {
  caret-color: green;
}

Результат

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

Спецификация
CSS Basic User Interface Module Level 4 # caret-color

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`caret-color`	57	79	53	44	11.1	57	53	43	11.3	7.0	57

См. также

Элемент <input>
Атрибут HTML contenteditable, который может использоваться для редактирования текста любого элемента
Тип данных <color>
Другие свойства, связанные с цветом: color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow и column-rule-color

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color