Стилизация флажков и переключателей с использованием CSS3

[DrPass]

Эх… на дворе 2020-й год, а такие обыденные вещи, как стили некоторых элементов, до сих пор делаются через откровенную задницу.

[MikeLP]

С приходом вебкомпонентов можно сделать свою реализацию с фолбеком на дефолтный инпут (чекбокс или радио)

[deepblack]

Полностью CSS определения можно загрузить здесь (*.zip).

CodePen, GitHub? — нет, не слышал

[deepblack]

Для тех кто не понял:
Изначально в статье не было ссылки на CodePen.
Сам Pen создан 23.02.2020 а статья и мой комментарий от 22.02.2020

Spoiler header

[apxi]

Осталось добавить, что стандартные контролы будут работать во всех браузерах, а не только в современных.
Ладно хоть в этом примере галка осталась галкой, а то иногда больное воображение дизайнеров превращает галку в не понятно какой переключатель.

[MikeLP]

switcher и checkbox очень похожи по своей сути но имеют обычно разную роль.

[apxi]

Например?

[MikeLP]

Switcher это по сути тумблер. То есть включить / выключить. Дизайн имеет корни из промышленного дизайна рычагов, старинных выключателей света (популярных в США/Великобритании) и так далее.
Checkbox — она же «галочка» пришла к нам уже из бумажных документов, где нужно отметить какие либо пункты/опции/варианты. Семантически галочка и тумблер отличаются по смыслу.

[apxi]

Но не отличаются по функционалу. Если рассматривать стандарты то более привычна галка чем тумблер.

[papikus]

При таком подходе умеющие пользоваться клавиатурой идут лесом, т.к. не обработаны состояния active и focus. А для более-менее современных браузеров уже давно можно использовать appearance:none. Тогда появится возможность создавать и стилизовать псевдоэлементы. Автоматически получается фаллбэк для старья которое не поддерживает appearance.

[Houston]

Давайте стилизовать чекбоксы правильно, как, например, описано здесь: css-tricks.com/custom-styling-form-inputs-with-modern-css-features

[gorenburg]

А этот пост какого года? Префиксы для transform уже давно ушли в прошлое. Да и сам метод уже стар как этот мир

[Eugeny1987]

Вот только не нужно смещать стандартные инпуты, достаточно сделать их position: absolute; opacity: 0; visibility: hidden; и на всякий случай z-index -1;

[Spaceoddity]

эта байда не будет корректно работать с атрибутом «reqiured»

[seregazolotaryow64]

Я благодарен за ваш материал и очень сильно он мне помог, но до сих пор сталкиваюсь с багом, который находится на этом примере.

Баг заключается том, что при клике на любой стилизированный с помощью материала элемент управления, браузер отправляет страницу на самый вверх. Как это устранить?

Сама разметка:

<footer id="form-popup">
                                <div class="check-selectors">
                                    <span class="title-form">FORM OF OWNERSHIP</span>
                                    <label>
                                        <input type="checkbox" value="" checked="">
                                        <span>checkbox on</span>
                                    </label>
                                    <label>
                                        <input type="checkbox" value="" checked="">
                                        <span>checkbox on</span>
                                    </label>
                                    <label>
                                        <input type="checkbox" value="">
                                        <span>checkbox off</span>
                                    </label>
                                </div>
                                <div class="radio-selectors">
                                    <span class="title-form">AVAILABILITY OF PARKING, SWIMMING POOL, RESTAURANT</span>
                                    <label>
                                        <input type="radio" value="" name="radio" checked="">
                                        <span>radiobutton on</span>
                                    </label>
                                    <label>
                                        <input type="radio" value="" name="radio">
                                        <span>radiobutton off</span>
                                    </label>
                                    <label>
                                        <input type="radio" value="" name="radio">
                                        <span>radiobutton off</span>
                                    </label>
                                </div>
                        </footer>