← All challenges
Challenge
Custom Toggle Switch
Easy- css
- forms
Turn a plain checkbox into an on/off switch: a pill-shaped track with a round knob that slides from one end to the other. CSS only, no image files.
Notes:
- The starter already wraps the checkbox in
<label class="switch">. Add the track and knob next to the input, inside that label. - Hide the checkbox visually (for example with
opacity: 0), not withdisplay: none, so the keyboard can still reach it.
Check your work against
- Built from a real `<input type="checkbox">`, not a plain clickable `<div>`
- Clicking anywhere on the switch toggles it
- The knob visibly slides from one side to the other
- On/off states are clearly distinguishable by color, not just position
No automatic grading
Check your work against the list above, then compare it with the solution preview.
Tab indents. Press Esc, then Tab to leave the editor.
Live preview
Starter loaded. The preview updates as you type.