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

Рассмотрим стилизацию чекбоксов с помощью 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%;
}
Демонстрация

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

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

Изучаем английский
EnglishRussian
InputВвод (данных)
CheckboxФлажок
LabelЯрлык, метка
BeforeДо, перед
CheckedПроверен, проверено
admin
06/01/2020 11:21