Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Custom Toggle Switch Control

Solution: Custom Toggle Switch Control

Let’s build a custom toggle switch with a sliding knob and background change using only CSS.

We'll cover the following...

Problem description

Given an HTML page containing a label with the class .switch that wraps a native checkbox input and a span element with the class .slider, write CSS to:

  • Hide the native checkbox input.

  • Style the .slider as a 50px × 24px rounded rectangle ...