CSS :checked — позначений прапорець або перемикач

HTML

<label class="switch">
    <input type="checkbox" checked>
    <span class="track"><span class="dot"></span></span>
    Сповіщення
</label>

CSS

.switch {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font: 16px system-ui, sans-serif;
    cursor: pointer;
}

/* не display:none — інакше зникає для клавіатури й читалок */
.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.track {
    width: 3rem;
    height: 1.6rem;
    padding: .2rem;
    border-radius: 1rem;
    background: #cbd5e1;
    transition: background .2s;
}

.dot {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
}

.switch input:checked + .track {
    background: #22c55e;
}

.switch input:checked + .track .dot {
    transform: translateX(1.4rem);
}

/* фокус видно, хоч сам input невидимий */
.switch input:focus-visible + .track {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}

HTML

<label><input type="checkbox" checked> позначений — великий</label>
<label><input type="checkbox"> непозначений — звичайний</label>
<p><em>Клацай прапорці — стиль іде за станом.</em></p>

CSS

input:checked {
    height: 50px;
    width: 50px;
}