Чӣ гуна шумо чекбокси фармоиширо татбиқ мекунед…

Даруест чанд роҳҳои иҷроиш:

Гуфтан нусхаи аслии, стилизатсия кардани лейбл. Ин роҳи дастрас ва семантикии дурусттарин аст.
Комилан пинҳон кардани нусхаи аслии, истифодаи aria- атрибутҳо ва JavaScript барои идоракунии ҳолат. Ба кор даровардани бештар дар бораи дастрасӣ талаб мекунад.

Иҷрои бо пинҳон кардани нусхаи аслии:

HTML:

// Мо истифода мебарем нусхаи пинҳоншуда ва лейбли алоқаманд.
<input type="checkbox" id="my-checkbox" class="visually-hidden">
<label for="my-checkbox" class="custom-checkbox-label">
    <span class="custom-checkbox-indicator"></span>
    <span class="custom-checkbox-text">Чекбокси ман</span>
</label>

CSS:

// Класс барои пинҳон кардани визуалӣ нусхаи аслии, нигоҳ доштани дастрасӣ барои хонандагони экран.
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
}

// Стилсозии лейбли махсус.
.custom-checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

// Стилсозии индикатор (карра) чекбокса.
.custom-checkbox-indicator {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    margin-right: 8px; /* Меҳро аз матн */
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
}

// Стилсозии индикатор барои ҳолати интихобшуда.
.custom-checkbox-label input:checked + .custom-checkbox-indicator {
    background-color: #007bff; /* Ранги дар интихоб */
    border-color: #007bff;
    position: relative; /* Барои ҷойгиркунии галочка */
}

// Илова кардани "галочка" бо истифодаи псевдоэлемент :after.
.custom-checkbox-label input:checked + .custom-checkbox-indicator:after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

Ин роҳ имкон медиҳад, ки истифодаи рафтори стандартии чекбокс (ҳолати checked), ва дар айни замон тамоми озодии дар зоҳирияти он дар стилизация таъмин карда шавад. visually-hidden дастрасиро барои технологияҳои ёрдамрасон таъмин мекунад.

Чӣ гуна шумо чекбокси фармоиширо татбиқ мекунед?