caret-color: цвет текстового курсора в поле
Свойство caret-color меняет цвет каретки — тонкого указателя позиции ввода в редактируемом тексте. Это отдельная настройка от цвета букв, рамки поля и выделенного фрагмента.
Назначение
Свойство caret-color меняет цвет каретки — тонкого указателя позиции ввода в редактируемом тексте. Это отдельная настройка от цвета букв, рамки поля и выделенного фрагмента.
Как это работает
Каретка видна, когда редактируемый элемент получил фокус и в нём доступна позиция ввода. Значение auto оставляет выбор браузеру. Явный цвет полезен, если фон поля отличается от фона страницы.
Пример
<style>.draft{background:#f3f7f5;color:#202820;caret-color:#9a244d;padding:.7rem;border:1px solid #52655b;max-width:100%;box-sizing:border-box}</style>
<label for="draft">Текст заметки</label>
<textarea id="draft" class="draft" rows="3">Попробуйте поставить курсор между словами.</textarea>Что должно получиться
После щелчка или перехода клавишей Tab каретка появляется внутри textarea в выбранном цвете. Текст остаётся тёмным: caret-color не меняет значение color.
Граница применения и частая ошибка
Прозрачная каретка затрудняет редактирование. Не используйте её скрытие как способ запретить ввод: для этого выбирают подходящее состояние поля и объясняют ограничение. Не путайте каретку с указателем мыши, который оформляется через cursor.
Самостоятельная проверка
Установите светлый и тёмный фон по очереди и проверьте различимость каретки. Введите несколько строк, выделите текст и снимите выделение. Фокус поля тоже должен быть заметен независимо от мигания курсора.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.