Коротко: стилизовать input в CSS можно почти полностью, кроме системных частей (например, календаря у type="date"). Основное: appearance: none, отступы, рамка, радиус, шрифт родителя и состояния (:focus, :disabled, :invalid). Для checkbox и radio стилизация особая.
Что стилизуется
| Часть | Свойство |
|---|---|
| Рамка и радиус | border, border-radius |
| Отступы | padding |
| Шрифт | font: inherit |
| Фон | background |
| Плейсхолдер | ::placeholder |
| Состояния | :focus, :disabled, :invalid |
Вкладки: примеры
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #ddd;
border-radius: 8px;
font: inherit; /* важно: иначе системный шрифт */
font-size: 16px; /* чтобы iOS не приближал страницу */
background: #fff;
color: #222;
box-sizing: border-box;
}
::placeholder { color: #9a9a9a; }font: inherit и font-size: 16px — два правила, которые решают половину проблем с полями.
input:focus {
outline: none;
border-color: #003F8F;
box-shadow: 0 0 0 3px rgba(0,63,143,.15);
}
input:disabled { background: #f3f3f3; color: #999; cursor: not-allowed; }
input:invalid:not(:placeholder-shown) { border-color: #992222; }
input[readonly] { background: #fafafa; }Фокус — самое важное состояние. Не убирайте его совсем: замените обводку на свою. :invalid подсвечивает ошибку, но только после ввода (:not(:placeholder-shown)).
input[type="checkbox"],
input[type="radio"] {
accent-color: #003F8F; /* быстро и без хаков */
}Самый простой способ «перекрасить» галочки и радиокнопки — accent-color. Для полностью своего вида скрывают нативный input и рисуют свой (см. отдельную статью про radio).
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset; /* убрать жёлтый фон */
-webkit-text-fill-color: #222;
}Браузер подсвечивает автозаполненные поля жёлтым. Приём с большой внутренней тенью белого цвета «перекрашивает» фон. Альтернатива — задать transition на фон.
outline: none на поле делает фокус невидимым для тех, кто ходит по форме с клавиатуры. Всегда добавляйте свой индикатор — рамку или тень.Практика: стилизовать форму
- Задайте общий вид полям (отступы, рамка, радиус).
- Наследуйте шрифт и задайте размер 16px.
- Опишите
:focusсвоим индикатором. - Опишите
:disabledи:invalid. - Стилизуйте placeholder и подписи.
- Проверьте на мобильном: клавиатура, размер, отсутствие автомасштаба.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Поля разного вида | не задан font: inherit |
наследовать шрифт |
| iOS «приближает» при фокусе | шрифт меньше 16px | задать 16px |
| Не видно фокуса | убрали outline | свой индикатор |
| Жёлтый фон автозаполнения | стиль браузера | приём с -webkit-autofill |
Проверьте себя
font: inherit?
Вопросы и ответы
Только частично: выпадающий календарь рисует браузер. Полный контроль — только у своей «даты» из блока и скрипта.
Через appearance: none (плюс -webkit-appearance). Но подумайте: стрелки удобны для изменения значения.
Подсветить поле и показать текст ошибки рядом. Полагаться только на :invalid нельзя — понятнее текстовое пояснение.
Само поле стилизуется полностью (appearance: none и своя стрелка), а список пунктов рисует система — там возможности ограничены.
Итоги
- Поля стилизуют почти полностью, кроме системных частей.
font: inheritи 16px решают типовые проблемы.- Фокус обязателен — замените outline своим индикатором.
- Чекбоксы быстро красятся через
accent-color.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.