Как стать автором
Обновить

Комментарии 15

Эх… на дворе 2020-й год, а такие обыденные вещи, как стили некоторых элементов, до сих пор делаются через откровенную задницу.
С приходом вебкомпонентов можно сделать свою реализацию с фолбеком на дефолтный инпут (чекбокс или радио)
Полностью CSS определения можно загрузить здесь (*.zip).

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


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

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

Например?

Switcher это по сути тумблер. То есть включить / выключить. Дизайн имеет корни из промышленного дизайна рычагов, старинных выключателей света (популярных в США/Великобритании) и так далее.
Checkbox — она же «галочка» пришла к нам уже из бумажных документов, где нужно отметить какие либо пункты/опции/варианты. Семантически галочка и тумблер отличаются по смыслу.
Но не отличаются по функционалу. Если рассматривать стандарты то более привычна галка чем тумблер.
При таком подходе умеющие пользоваться клавиатурой идут лесом, т.к. не обработаны состояния active и focus. А для более-менее современных браузеров уже давно можно использовать appearance:none. Тогда появится возможность создавать и стилизовать псевдоэлементы. Автоматически получается фаллбэк для старья которое не поддерживает appearance.
А этот пост какого года? Префиксы для transform уже давно ушли в прошлое. Да и сам метод уже стар как этот мир
Вот только не нужно смещать стандартные инпуты, достаточно сделать их position: absolute; opacity: 0; visibility: hidden; и на всякий случай z-index -1;
эта байда не будет корректно работать с атрибутом «reqiured»

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

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

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

<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>
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории