Easy, All CSS custom HTML checkboxes

Let’s face it, nobody likes a plain ol’ checkbox and sometimes (depending on what you’re trying to accomplish), they can be tricky to style without dropping in a javascript library. Recently, while developing our new app Smashbook, I needed to replicate the native iOS style toggle switch. Attempting to replicate by using only HTML and CSS, here’s what I came up with…

We’ll start with the HTML.

Pretty simple, right? Now for the CSS. This is the container for our toggle.

The only thing important here is the position: relative declaration. This allow us to absolutely position the elements contained inside it. The rest is completely arbitrary. Next, comes the toggle switch and track it will slide along.

And for the toggle:

Not too shabby! Now, just hide that pesky input and give it the same dimensions as the track, opacity: 0 and position it directly on top of the toggle and track. Note: the z-index of 2 ensures input is still clickable.

Now, add the “clicked” state. Here the track will become green and the + will allow us to target the sibling directly succeeding the input.

The toggle will then move to the left side of the track. The ~ is the general sibling selector; this let’s us target any sibling element succeeding the input.

Finally, add a transition to the track and toggle. This will give the toggle slide and the “track changing color” a more natural feel. Tada! There you have it.

We implemented this for our upcoming product “Smashbook – Manage Your Tennis Data Like a Pro!” https://twitter.com/tennissmashbook

Also, here’s a link to Codepen.io, if you’d like to see a demo http://codepen.io/bryancunningham/pen/syhvC/
Got any questions? Keep the conversation going! We’d love to hear from you.