Ответ
Для создания кастомного чекбокса можно использовать комбинацию HTML и CSS, скрывая нативный элемент и стилизуя его псевдоэлементы или соседние элементы.
<label class="custom-checkbox">
<input type="checkbox" class="hidden-checkbox">
<span class="checkbox-icon"></span>
Текст метки
</label>.hidden-checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.checkbox-icon {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
margin-right: 8px;
position: relative;
vertical-align: middle;
}
.hidden-checkbox:checked + .checkbox-icon {
background-color: #2196F3;
border-color: #2196F3;
}
.hidden-checkbox:checked + .checkbox-icon::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}Ключевые моменты:
- Нативный чекбокс скрыт, но остается в DOM для обработки состояния
- Стилизуется соседний элемент (span) через соседний селектор (+)
- Состояние checked меняет внешний вид кастомного чекбокса
- Галочка реализована через псевдоэлемент ::after
Ответ 18+ 🔞
А, ну это ж классика, блядь! Кастомный чекбокс, ебать мои старые костыли! Все эти дизайнеры приходят: «Нам нативный не нравится, он уродливый!». Ну, сука, сделаем красивый, чтоб твоя мамка ахнула.
Смотри, вся магия, бля, в том, чтобы нативный инпут спрятать, но не выкидывать нахуй. Он должен остаться в разметке, чтобы клики и состояние checked работали. А вместо него мы нарисуем свою, блядь, красоту.
Вот смотри, как это устроено, ёпта:
<label class="custom-checkbox">
<input type="checkbox" class="hidden-checkbox">
<span class="checkbox-icon"></span>
Текст метки
</label>Видишь? label оборачивает всё. Это важно, сука! Потому что если кликнешь в любом месте — хоть по тексту, хоть по нашей нарисованной хуйне — клик провалится на спрятанный нативный чекбокс и он переключится. Гениально и просто, как топор, блядь.
А теперь CSS, где мы эту мартышку раскрашиваем:
.hidden-checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}Вот он, наш невидимый солдат, блядь. На странице есть, но его нихуя не видно и место он не занимает. Но он на посту, ёпта!
.checkbox-icon {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
margin-right: 8px;
position: relative;
vertical-align: middle;
}А это уже наша подстава, блядь! Красивый квадратик, который все будут видеть и думать: «О, какой чекбокс!». Ан нет, пизда — это просто span, разрисованный.
И вот самый сок, бля:
.hidden-checkbox:checked + .checkbox-icon {
background-color: #2196F3;
border-color: #2196F3;
}Селектор +, ёпта! Это ж волшебство! Он говорит: «Эй, ты, checkbox-icon, который стоит ПРЯМО ПОСЛЕ чекбокса в разметке! Если чекбокс в состоянии checked — меняй свой фон и бордер!». И он меняет, сука! Без единой строчки JS, в рот меня чих-пых!
Ну и галочку дорисовываем псевдоэлементом:
.hidden-checkbox:checked + .checkbox-icon::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}Вот и вся, блядь, философия. Спрятал уродливый нативный элемент, сделал красивую подставу, связал их через CSS. И работает, сука, как швейцарские часы. Главное — не наебнуться с селекторами, а то вся эта, блядь, конструкция накроется медным тазом.