Стилизация чекбокса

Рассмотрим стилизацию чекбоксов с помощью CSS. А также рассмотрим, как реализовать отметку чекбокса картинкой.

Стилизация чекбокса

Создадим input с типом checkbox и элемент, который будет новым чекбоксом .mycheckbox__new. Затем обернём их в label чтобы связать label и input. Это необходимо для того чтобы при нажатии на текст, изменялось состояние чекбокса.

<label class="mycheckbox">
    <input class="mycheckbox__default" type="checkbox">
    <div class="mycheckbox__new"></div>
    <div class="mycheckbox__descr">Чекбокс</div>
</label>

Стилизуем новоиспечённый чекбокс: скроем стандартный input и при помощи оператора + в состоянии :checked будем закрашивать чекбокс.

/* Стилизация чекбокса */
.mycheckbox {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.mycheckbox__default {
    display: none;
}

.mycheckbox__default:checked + .mycheckbox__new::after {
    height: 25px;
    width: 25px;
    border-radius: 4px;
}

.mycheckbox__new {
    width: 25px;
    height: 25px;
    border-radius: 4px;
    border: 1px solid #222;
    margin-right: 9px;
    position: relative;
    flex-shrink: 0;
}

.mycheckbox__new::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    background: #2f4857;
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}
/* /стилизация чекбокса */

SASS

// Стилизация чекбокса

.mycheckbox

    cursor: pointer

    display: flex

    align-items: center

    user-select: none

    &__default

        display: none

        &:checked + .mycheckbox__new::after

            height: 25px

            width: 25px

            border-radius: 4px

    &__new

        width: 25px

        height: 25px

        border-radius: 4px

        border: 1px solid #222

        margin-right: 9px

        position: relative

        flex-shrink: 0

        &::after

            content: ""

            display: block

            width: 0

            height: 0

            background: #2f3856

            left: 50%

            top: 50%

            position: absolute

            transform: translate(-50%, -50%)

            transition: 0.2s ease-in

// /стилизация чекбокса

Чекбокс картинкой

Для того чтобы реализовать чекбокс картинкой, в свойстве background добавим background-image. Я вставлю SVG-изображение прямо в CSS код используя base64

.mycheckbox__new::after {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNTAiIGhlaWdodD0iNTAiCnZpZXdCb3g9IjAgMCA1MCA1MCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij48cGF0aCBkPSJNIDQxLjkzNzUgOC42MjUgQyA0MS4yNzM0MzggOC42NDg0MzggNDAuNjY0MDYzIDkgNDAuMzEyNSA5LjU2MjUgTCAyMS41IDM4LjM0Mzc1IEwgOS4zMTI1IDI3LjgxMjUgQyA4Ljc4OTA2MyAyNy4yNjk1MzEgOC4wMDM5MDYgMjcuMDY2NDA2IDcuMjgxMjUgMjcuMjkyOTY5IEMgNi41NjI1IDI3LjUxNTYyNSA2LjAyNzM0NCAyOC4xMjUgNS45MDIzNDQgMjguODY3MTg4IEMgNS43NzczNDQgMjkuNjEzMjgxIDYuMDc4MTI1IDMwLjM2MzI4MSA2LjY4NzUgMzAuODEyNSBMIDIwLjYyNSA0Mi44NzUgQyAyMS4wNjI1IDQzLjI0NjA5NCAyMS42NDA2MjUgNDMuNDEwMTU2IDIyLjIwNzAzMSA0My4zMjgxMjUgQyAyMi43NzczNDQgNDMuMjQyMTg4IDIzLjI4MTI1IDQyLjkxNzk2OSAyMy41OTM3NSA0Mi40Mzc1IEwgNDMuNjg3NSAxMS43NSBDIDQ0LjExNzE4OCAxMS4xMjEwOTQgNDQuMTUyMzQ0IDEwLjMwODU5NCA0My43ODEyNSA5LjY0NDUzMSBDIDQzLjQxMDE1NiA4Ljk4NDM3NSA0Mi42OTUzMTMgOC41ODk4NDQgNDEuOTM3NSA4LjYyNSBaIj48L3BhdGg+PC9zdmc+")
    no-repeat center / 95%;
}

Стилизация checkbox с помощью appearance

Теперь рассмотрим как стилизовать checkbox, благодаря свойству appearance.

Структура.

<input type="checkbox" class="checkbox">

Стили для checkbox.

.checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
    border: 1px solid #d6d6cd;
    width: 18px;
    height: 19px;
    cursor: pointer;
    position: relative;
}
.checkbox::before {
    content: "🗸";
    color: lightseagreen;
    font-size: 18px;
    position: absolute;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    opacity: 0;
    transition: .1s ease-in;
}
.checkbox:checked::before {
    opacity: 1;
}

Аналогично стилизуется input типа радио

Если вам понравилась данная статья, рекомендую прочитать про стилизацию select

Изучаем английский

English	Russian
Input	Ввод (данных)
Checkbox	Флажок
Label	Ярлык, метка
Before	До, перед
Checked	Проверен, проверено

admin 11/05/2020 15:40

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Стилизация чекбокса