Problem description

You are given a checkbox input with the class <input class="toggle-input"> and a label with the class <label class="toggle-label"> that together form a toggle switch UI. The label visually displays the switch, and the input is hidden but accessible.

Write CSS to meet the following requirements:

• The switch must look like a rounded slider with a movable knob and clear “on/off” state.

• When the checkbox is :focus (e.g., using the “Tab’’ key), a bold blue focus ring (0 0 0 3px #2684FF) must appear around the switch, clearly visible and not overlapping the slider knob.

• The default browser outline should not appear; only your custom ring should show.

• The focus indicator should be visible regardless of background color.

Goal

Make the toggle switch visually clear and accessible, ensuring keyboard users can easily identify focus state.

Constraints

Do not use JavaScript or change HTML structure.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.