- Теория
- Теория
Бумажные кнопки, шаг 2
Итак, у нас есть заготовки кнопок. Давайте оживим их.
Переключаться кнопки будут при помощи трюка с селекторами ~
и :checked
, который описан в задании части «Селекторы. Тонкости».
Сначала зададим цвет фона для активного состояния кнопок. Кнопка «Правда» будет менять цвет на зелёный, а кнопка «Ложь» — на красный. Для этого нам нужно будет воспользоваться такими селекторами:
.paper-btn-true input:checked ~ label { ... } // правда
.paper-btn-false input:checked ~ label { ... } // ложь
Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 15 апреля 2024. Всего от 4410 ₽в месяц.
Минимальный вид табов
- index.html
HTML
HTML
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
100%