Никак не могу понять, почему в этом задании всегда label пишется с псевдоэлементом ::before? Ведь в задании перед label стоят input’ы чекбоксов и радиобаттонов. Спасибо!
забей, это задание экстра-сложное =) тем более что особо не объяснено, что делать тут (я в первый раз во всяком случае вообще не допер и дропнул это задание, только текстовые инпуты смог сделать).
мы типа убираем видимость радиокнопок и чекбоксов. потом на их месте рисуем с помощью псевдоэлемента ::before новое отображение таких “кнопочек”.
соответственно перерисовываем цвет лейблов и этих новых псевдоэлементов, если перед ними эти инпуты checked и disabled.
Все равно не понял, но спасибо : )
мы убиваем в селекторе отображение чекбоксов и радиобаттонов(чтобы соответствовало макету) input[type^="radio"], input[type^="checkbox"] { display: none; }
нам нужно без изменений html-кода создать там чекбоксы и баттоны(как на макете), это можно сделать с помощью псевдоэлементов перед(before) лейблами
label[for|="radio"]::before, label[for|="checkbox"]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: middle; border: 3px solid #ffffff; box-shadow: 0 0 0 3px #a0a0a0; }
Соответственно, далее необходимо работать только с лейблами для задания стиля и забыть про чексбосы и радиобаттоны)0))
PS: Не совсем понял, если честно, какая в этом практическая польза
1 лайк
создание чекбоксов, которые будут выглядеть “как на макете” независимо от браузера и операционки
эт целая профессия есть даже, ui/ux инженер/дизайнер
(“интерфейсные инжонеры/десигнеры”)