Комментарии 15
Эх… на дворе 2020-й год, а такие обыденные вещи, как стили некоторых элементов, до сих пор делаются через откровенную задницу.
+3
Осталось добавить, что стандартные контролы будут работать во всех браузерах, а не только в современных.
Ладно хоть в этом примере галка осталась галкой, а то иногда больное воображение дизайнеров превращает галку в не понятно какой переключатель.
+1
switcher и checkbox очень похожи по своей сути но имеют обычно разную роль.
+2
Например?
0
Switcher это по сути тумблер. То есть включить / выключить. Дизайн имеет корни из промышленного дизайна рычагов, старинных выключателей света (популярных в США/Великобритании) и так далее.
Checkbox — она же «галочка» пришла к нам уже из бумажных документов, где нужно отметить какие либо пункты/опции/варианты. Семантически галочка и тумблер отличаются по смыслу.
Checkbox — она же «галочка» пришла к нам уже из бумажных документов, где нужно отметить какие либо пункты/опции/варианты. Семантически галочка и тумблер отличаются по смыслу.
+1
При таком подходе умеющие пользоваться клавиатурой идут лесом, т.к. не обработаны состояния active и focus. А для более-менее современных браузеров уже давно можно использовать appearance:none. Тогда появится возможность создавать и стилизовать псевдоэлементы. Автоматически получается фаллбэк для старья которое не поддерживает appearance.
+1
Давайте стилизовать чекбоксы правильно, как, например, описано здесь: css-tricks.com/custom-styling-form-inputs-with-modern-css-features
+3
А этот пост какого года? Префиксы для transform уже давно ушли в прошлое. Да и сам метод уже стар как этот мир
0
Вот только не нужно смещать стандартные инпуты, достаточно сделать их position: absolute; opacity: 0; visibility: hidden; и на всякий случай z-index -1;
0
эта байда не будет корректно работать с атрибутом «reqiured»
0
Я благодарен за ваш материал и очень сильно он мне помог, но до сих пор сталкиваюсь с багом, который находится на этом примере.
Баг заключается том, что при клике на любой стилизированный с помощью материала элемент управления, браузер отправляет страницу на самый вверх. Как это устранить?
Сама разметка:
<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>
0
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.
Стилизация флажков и переключателей с использованием CSS3