Встречается на собеседованиях • сегодня
Как сделать кастомный checkbox
Для создания кастомного чекбокса можно использовать комбинацию HTML и CSS, скрывая нативный элемент и стилизуя его псевдоэлементы или соседние элементы.
```html
```
```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;
}
.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);
}
```
Ключевые моменты:
1. Нативный чекбокс скрыт, но остается в DOM для обработки состояния
2. Стилизуется соседний элемент (span) через соседний селектор (+)
3. Состояние checked меняет внешний вид кастомного чекбокса
4. Галочка реализована через псевдоэлемент ::after
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
офферы быстрее!
Попробовать бесплатно
Следующий вопрос
Это единственный вопрос по вашему фильтру
как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы