Gdzie wykorzystać ten przykład?
Ustawienia wyglądu i opcje formularza. Wariant „Przełączniki: karta z paskiem” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
Element kontrolny przełącza stan, a selektory CSS aktualizują jego wygląd. To warstwa interfejsu, którą trzeba powiązać z własną logiką ustawień.
Jak dodać go na stronę?
- Otwórz przykład w edytorze i podmień tekst oraz kolory.
- HTML wstaw w miejscu, w którym ma pojawić się element.
- CSS przenieś do arkusza stylów swojej strony. Reguły
body z podglądu dopasuj do własnego układu. - Sprawdź działanie na telefonie, klawiaturą i z własną treścią.
Na co zwrócić uwagę?
Dodaj jednoznaczną etykietę i sprawdź obsługę klawiaturą. Wygląd kontrolki powinien odpowiadać jej rzeczywistej wartości.
Co możesz zmienić w konfiguratorze?
Tekst przykładu, Kolor akcentu. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.
Gotowy kod: Przełączniki: karta z paskiem
HTML
<div class="effect"><label class="choice"><input type="checkbox"><span class="track" aria-hidden="true"><i></i></span><span class="choice-label">Przełączniki</span></label></div>
CSS
*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.effect{width:100%;max-width:650px;color:#e95b30;text-align:center}.effect *{box-sizing:border-box}.effect button,.effect a{font:inherit}.effect button{cursor:pointer}.effect h2{font-size:clamp(25px,5vw,42px);line-height:1.2;margin:0 0 14px}.effect p{font-size:13px;color:#7c8c6d;margin:10px 0}.effect button:focus-visible,.effect a:focus-visible,.effect input:focus-visible{outline:3px solid #e95b30;outline-offset:5px}.choice{position:relative;display:inline-flex;align-items:center;gap:16px;cursor:pointer;text-align:left}.choice input{position:absolute;left:0;top:0;opacity:0;width:60px;height:100%;margin:0;cursor:pointer}.track{position:relative;display:block;width:60px;height:32px;background:#d6dfca;flex-shrink:0;transition:.3s;width:7px;height:45px;border-radius:4px}.track i{display:block;position:absolute;left:4px;top:4px;width:24px;height:24px;background:white;border-radius:50%;box-shadow:0 2px 4px #0002;transition:transform .3s,background .3s}.choice input:checked+.track{background:#e95b30}.choice input:checked+.track i{transform:scale(.65);background:#fff;}.choice input:focus-visible+.track{outline:3px solid #e95b30;outline-offset:5px}.choice-label{font-size:14px;color:#5a7047}.track i{inset:4px;width:auto;height:auto;box-shadow:none;background:#e95b30;transform:scale(0)}.choice{padding:15px;background:#fff;border:1px solid #d5dfc9;border-radius:7px}.track i{display:none}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}