CSS свойство caret-color
caret-color — CSS свойство, задающее цвет курсора ввода. Изучите описание и примеры использования.
CSS свойство caret-color задаёт цвет курсора вставки — тонкой мигающей вертикальной черты, обозначающей место появления вводимого текста в текстовом поле или любом редактируемом элементе. По умолчанию курсор вставки соответствует цвету текста, установленному браузером (обычно чёрному). С помощью caret-color вы можете перекрасить его в цвет вашего бренда, улучшить контрастность на фоне цветного поля ввода или полностью скрыть его.
Курсор вставки — исключительно индикатор набора текста. Он не совпадает с курсором мыши (управляемым свойством cursor) и не влияет на цвет выделения текста.
На этой странице рассматривается назначение caret-color, область его применения, допустимые значения и особенности, которые стоит знать перед использованием.
| Начальное значение | auto |
|---|---|
| Применяется к | Элементам, принимающим текстовый ввод. |
| Наследуется | Да. |
| Анимируемо | Да (как цвет). |
| Версия | CSS3 |
| DOM Syntax | object.style.caretColor = "#1c87c9"; |
Где применяется caret-color
Курсор вставки появляется там, где пользователь может вводить текст или позиционировать текстовый курсор, поэтому caret-color применяется к:
- Полям
<input>, принимающим текст (text,search,email,url,password,tel,number). - Элементам
<textarea>. - Любому элементу с атрибутом
contenteditable, установленным вtrue.
Поскольку свойство наследуется, достаточно задать его один раз на контейнере (или на :root), и все редактируемые дочерние элементы унаследуют его — удобно для задания стиля целой формы одним правилом.
Синтаксис
caret-color: auto | <color>;Пример: прозрачный и пользовательский курсор
Первое поле сохраняет курсор по умолчанию, второе скрывает курсор с помощью transparent, а третье использует пользовательский синий цвет:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.caret-example1 {
caret-color: transparent;
}
.caret-example2 {
caret-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Caret-color property example</h2>
<input value="Default caret color" />
<br />
<br />
<input class="caret-example1" value="Transparent caret color" />
<br />
<br />
<input class="caret-example2" value="Custom caret color" />
</body>
</html>Значения
| Значение | Описание |
|---|---|
| auto | Браузер выбирает подходящий цвет, как правило currentColor (цвет текста элемента). Это значение по умолчанию. |
<color> | Любой допустимый CSS цвет: именованный цвет, hex (#1c87c9), rgb()/rgba(), или hsl()/hsla(). Используйте transparent для скрытия курсора. |
| initial | Сбрасывает свойство до его значения по умолчанию (auto). |
| inherit | Принимает вычисленное значение родительского элемента. |
Поддерживается любой цветовой формат, поэтому следующие объявления допустимы:
caret-color: red; /* named color */
caret-color: #1c87c9; /* hex */
caret-color: rgb(28 135 201);/* rgb */
caret-color: hsl(202 76% 45%);/* hsl */
caret-color: transparent; /* invisible caret */Полный список ключевых слов приведён в разделе CSS color names, а о том, как разрешается currentColor, читайте в описании свойства color.
Особенности и советы
autoразрешается вcurrentColor. Если вы меняете только цвет текстаcolor, курсор вставки следует за ним автоматически — зачастуюcaret-colorвовсе не нужен, если только вы не хотите, чтобы курсор отличался от текста.transparentскрывает курсор, не отключая редактирование. Поле по-прежнему принимает ввод; исчезает лишь мигающий индикатор. Не используйте это в реальных формах — невидимый курсор ухудшает удобство использования и доступность.- Нет эффекта на нередактируемых элементах. Установка
caret-colorна<div>безcontenteditable, или на отключённом/доступном только для чтения поле ввода, не даёт результата, поскольку курсор там не отрисовывается. - Следите за контрастностью. Курсор, сливающийся с тёмным фоном поля ввода, трудно заметить. Выбирайте цвет, который хорошо выделяется, — так же, как вы подбираете контраст для текста.
- Свойство анимируемо. Поскольку значение является цветом, его можно плавно изменять — например, переходить к цвету выделения, когда поле ввода получает фокус.
input {
caret-color: #999;
transition: caret-color 0.2s ease;
}
input:focus {
caret-color: #1c87c9;
}Поддержка браузерами
caret-color поддерживается во всех современных браузерах (Chrome, Edge, Firefox, Safari и Opera). При отсутствии поддержки происходит плавная деградация: браузеры, не распознающие это свойство, просто отображают курсор по умолчанию, поэтому использовать его без запасного варианта совершенно безопасно.
Связанные свойства
color— цвет текста и источникcurrentColor, к которому обращаетсяcaret-color: auto.outline-color— цвет контура фокуса, часто отображаемого рядом с активным полем ввода.opacity— уменьшение непрозрачности элемента, включая его курсор вставки.