- Теория
- Теория
Испытание: UI-кит для формы
В этом задании вы создадите простой набор стилей для полей форм, или User Interface кит.
Ваша задача — подобрать недостающие селекторы, чтобы этот интерфейс выглядел так, как в образце.
С появлением новых селекторов, стало намного проще стилизовать такие элементы форм, как радиокнопки и чекбоксы.
Сами по себе поля форм стилизуются очень тяжело. Но поля можно спрятать, а их состояние передавать в соседние label
, задавая подписям разные фоны или другие стили в зависимости от состояния полей. То есть внешний вид поля рисуется внутри label
, иногда с помощью псевдоэлементов.
Вот пример набора селекторов для стилизации радиокнопки:
input[type=radio] + label {...}
input[type=radio]:checked + label {...}
input[type=radio]:disabled + label {...}
Подсказки:
- в одном селекторе может группироваться несколько через запятую;
- при стилизации в некоторых элементах были использованы псевдоэлементы.
Минимальный вид табов
- index.html
HTML
HTML
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
100%