• Теория
  • Теория

Испытание: UI-кит для формы

В этом задании вы создадите простой набор стилей для полей форм, или User Interface кит.

Ваша задача — подобрать недостающие селекторы, чтобы этот интерфейс выглядел так, как в образце.

С появлением новых селекторов, стало намного проще стилизовать такие элементы форм, как радиокнопки и чекбоксы.

Сами по себе поля форм стилизуются очень тяжело. Но поля можно спрятать, а их состояние передавать в соседние label, задавая подписям разные фоны или другие стили в зависимости от состояния полей. То есть внешний вид поля рисуется внутри label, иногда с помощью псевдоэлементов.

Вот пример набора селекторов для стилизации радиокнопки:

input[type=radio] + label {...}
input[type=radio]:checked + label {...}
input[type=radio]:disabled + label {...}

Подсказки:

  • в одном селекторе может группироваться несколько через запятую;
  • при стилизации в некоторых элементах были использованы псевдоэлементы.
Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Селекторы. Тонкости» тренажёра «Продвинутые селекторы атрибутов и состояний» можно после регистрации и оформления подписки.