caret-color: каретка ввода

Цвет каретки в текстовых полях ввода.

Уровень: средний 10 разделов 8 минут

1. Что это и зачем

Цвет каретки в текстовых полях ввода.

Цвет в CSS задаётся в цветовых моделях: hex, rgb(a), hsl(a) и их нотациях, включая современные oklch. Фон управляется свойством background с десятком подсвойств — от цвета до градиентов и повторения картинки.

{title} — это про контраст, а не про «красоту»: сначала читаемость, потом настроение.

2. Синтаксис и пример

input { caret-color: #2563eb; }

Запись выше — базовый вариант использования. Обратите внимание, как caret-color: каретка ввода вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Градиенты — это фоновые изображения, сгенерированные браузером; их можно накладывать и комбинировать с картинками. Прозрачность достигается альфа-каналом, а не «лёгким» оттенком.

В реальной разметке caret-color: каретка ввода встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — это про контраст, а не про «красоту»: сначала читаемость, потом настроение.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Современная модель цвета (hsl, oklch, color()) поддерживается везде в 2020-х. Старые hex-значения тоже всегда работают, поэтому миграция безопасна.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Подбирайте под тему фона для заметности.

Невидимая каретка ломает набор вслепую.

7. Практическое задание

Задайте каретку для поля поиска.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

input { caret-color: #2563eb; }

8. Как применять в проектах

Палитра заводится в переменные :root и используется во всём интерфейсе; тёмная тема меняет переменные, а не отдельные страницы.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

цвета вынесены в переменные;
контраст текста и фона ≥ 4.5:1 для текста;
состояния (hover/active) различимы по цвету И форме;
градиенты не конфликтуют с тёмной темой;
прозрачность не «серотит» текст;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам