Как стилизовать checkbox css

4 года назад

Человек-Молекула

Ответы

Для стилизации checkbox с помощью CSS, можно использовать псевдоэлементы ::before и ::after, чтобы создать кастомные графические элементы вместо стандартного стиля checkbox.

Пример стилизации checkbox:

/* Скрыть оригинальный checkbox */
input[type="checkbox"] {
    display: none;
}

/* Создание кастомного внешнего вида для checkbox */
input[type="checkbox"] + label {
    position: relative;
    padding-left: 30px;
}

input[type="checkbox"] + label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #000;
}

/* Стилизация кастомного checkbox при выборе */
input[type="checkbox"]:checked + label::before {
    background-color: #000;
}

Здесь мы прячем оригинальный checkbox с помощью display: none;, затем создаем кастомный checkbox используя псевдоэлемент ::before. Мы также применяем стили для состояния "checked".

Вы можете дополнительно настроить стилизацию checkbox в соответствии с вашим дизайном, включая цвета, размеры и форму элементов.

2 года назад

Olga Pejenkova

5 месяцев·С нуля

Профессиональная верстка

Адаптивная вёрстка для отображения на любых устройствах