Checkbox Toggle Switches Are Confusing UI

TLDR: Checkbox toggle switches don't work the way they appear. Use a rocker toggle switch or a proper sliding switch. Example at the bottom.

The Problem With Checkbox Toggle Switches

Most checkbox toggle switches created with CSS are confusing UI because they do not function like their real-world counterparts. When I encounter a toggle switch in my iPad settings I slide it over with my finger. Voilà, it works properly just like the real-world toggle on the side of the iPad. Often when I encounter the same toggle switch on the web I slide it over with my mouse and it doesn't work. It doesn't work because it's meant to be pushed like a button; but it doesn't appear as a button.

Looks Like a Range Slider

To make matters worse HTML has actual sliders which look just like these toggles. If you want to make a sliding form element you could use the input[type="range"] element. It does not make sense to style a checkbox to look like a sliding range input, but that's what is being done all over the Internet. YouTube uses a sliding toggle for autoplay, and it works as a sliding toggle - it doesn't use a checkbox.

The Rocker Switch Solution

The rocker switch is a real-life toggle that functions as a button. By styling a checkbox to look like a rocker toggle switch you retain its real-world functionality. This is not the only solution or even the best solution, but it does a better job of conveying a click (or tap) by looking like a button rather than looking like a slider. It's also fun to click (or tap).

I created the above pen to demonstrate the checkbox rocker switch. I look forward to seeing more creative solutions to use in place of checkbox toggle switches.