Popcorn Hack: Fill in the Blanks

  1. The checkbox on a toggle keeps track of whether it is on or off.
  2. The slider is the visible part of the toggle that changes color when it is turned on.
  3. The .switch class controls the toggle’s position, size, padding, and alignment.
  4. The border-radius property makes the slider have rounded edges.
  5. The &:before rule controls the white circle of the toggle.

Homework Hack: Interactive Settings Panel

This solution uses three labeled OCS toggles. Each toggle controls a real page feature, and the status panel updates the number of toggles currently turned on.

Display Preferences

Use these switches to change page preferences.

Toggles currently on: 0