Стилизация форм без боли: как перестать бояться инпутов в 2026 году
Слушай, помнишь те времена, когда при виде макета с кастомными чекбоксами у тебя начинал дергаться глаз? Дизайнеры рисовали шедевры, а мы проклинали всё на свете, потому что нативно стилизовать стандартные элементы форм было практически невозможно. Формы — это лицо продукта, но долгое время это лицо выглядело так, будто его собирали из запчастей старого «Запорожца».
Сегодня ситуация кардинально изменилась. Нам больше не нужны костыли на jQuery или тяжелые UI-библиотеки, чтобы сделать форму красивой и отзывчивой. Давай разберем, как навести красоту на чистом CSS, не теряя при этом доступности.
Как мы страдали раньше
Вспомни этот классический трюк: берем input type=»checkbox», прячем его через opacity: 0 или вообще выкидываем за пределы экрана, а потом через соседний селектор input + label::before рисуем свой квадрат. А если нужно было изменить размер текстового поля под контент? Мы писали тонны JavaScript-кода, который следил за событием input и судорожно менял высоту textarea.
Это было больно, это было хрупко, и это часто ломало доступность (A11y). Пользователи скринридеров часто не понимали, куда они попали, а фокус на элементах жил своей отдельной, никому не понятной жизнью.
Как делать правильно в 2026 году
Сейчас у нас есть всё, чтобы верстать формы элегантно. Во-первых, забудь про хаки с чекбоксами — свойство accent-color позволяет в одну строку изменить брендовый цвет радиокнопок и чекбоксов. Во-вторых, современные логические свойства CSS помогают нам делать формы, которые идеально выглядят вне зависимости от направления языка (LTR или RTL).
Но самое крутое — это свойство field-sizing. Теперь текстовые поля могут расти вместе с вводимым текстом без единой строчки JS. О том, как это работает в деталях, можешь глянуть в статье про CSS-свойство field-sizing.
И не забывай про псевдокласс :has(). Теперь ты можешь стилизовать родительский контейнер, если само поле ввода находится в состоянии ошибки или фокуса. Это полностью убивает необходимость вешать лишние классы через JavaScript при каждом клике.
Готовый сниппет кода
Ниже — пример современной структуры и стилизации. Минимализм, мощь и никакой лишней обертки.
/* Используем современные возможности CSS */
form {
display: grid;
gap: 1.5rem;
max-width: 400px;
}
.field-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
/* Подсвечиваем всю группу, если поле в фокусе */
&:has(input:focus) label {
color: #6366f1;
font-weight: bold;
}
}
input, textarea {
all: unset; /* Сбрасываем браузерный мусор */
box-sizing: border-box;
inline-size: 100%;
padding: 0.75rem;
border: 2px solid #e2e8f0;
border-radius: 12px;
transition: all 0.2s ease;
/* Магия: textarea растет сама! */
field-sizing: content;
min-block-size: 3rem;
}
input:focus-visible {
border-color: #6366f1;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}
/* Стилизуем чекбоксы одной левой */
input[type="checkbox"] {
all: revert; /* Возвращаем базу для чекбоксов */
accent-color: #6366f1;
inline-size: 1.5rem;
block-size: 1.5rem;
}
Частая ошибка новичков
Самый большой грех, за который в приличном обществе бьют по рукам — это удаление фокуса через outline: none; без создания визуальной альтернативы. Если ты просто убираешь синюю рамку браузера, ты буквально «ослепляешь» тех, кто пользуется клавиатурой. Всегда используй :focus-visible. Этот псевдокласс позволяет показывать стильный фокус только тем, кто перемещается кнопкой Tab, и не бесить тех, кто кликает мышкой.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!