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

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

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

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

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

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

/* Стилизация checkbox */
.mycheckbox {
    cursor: pointer;
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 0;
    margin-right: 40px;
}

.mycheckbox__default {
    display: none;
}

.mycheckbox__new {
    width: 24px;
    height: 24px;
    background: #FFFFFF;
    background: #FFFFFF;
    border: 1px solid rgba(59, 50, 95, 0.1);
    border-radius: 7px;
    margin-right: 10px;
    position: relative;
    display: block;
    flex-shrink: 0;
}

.mycheckbox__new::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" fill="none" %3E%3Cpath d="M1 9.5L5 13L14.5 1.5" stroke="%233AB7F6" stroke-width="3"/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: block;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: 0.11s ease-in;
}

.mycheckbox__default:checked + .mycheckbox__new::after {
    height: 15px;
    width: 13px;
    border-radius: 50%;
}
/* /стилизация чекбокса */

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

Стилизация 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 radio

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

<label class="myradio">
    <input class="myradio__default" type="radio" name="Radio input" checked>
    <span class="myradio__new"></span>
    <span class="myradio__descr">Radio button</span>
</label>

<label class="myradio">
    <input class="myradio__default" type="radio" name="Radio input" checked>
    <span class="myradio__new"></span>
    <span class="myradio__descr">Radio button</span>
</label>

Стили для radio input.

/* Стилизация input type radio */
.myradio {
    cursor: pointer;
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 0;
    margin-right: 40px;
}

.myradio__default {
    display: none;
}

.myradio__default:checked + .myradio__new::after {
    height: 12px;
    width: 12px;
    border-radius: 50%;
}

.myradio__new {
    width: 24px;
    height: 24px;
    background: #FFFFFF;
    border: 1px solid rgba(59, 50, 95, 0.1);
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    display: block;
    flex-shrink: 0;
}

.myradio__new::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    background: #3ab7f6;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: 0.2s ease-in;
}
/* /стилизация radio */

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

Градиентный текст Как изменить маркер списка