Creating a Radio Toggle in CSS3

A toggle slider presents the user two states that are mutually exclusive. Those states can be on or off for example. On the right side of the screen, it shows a horizontal strip with a controller, the toggle slider. The title and the current state are found on the left side of the toggle. You’ll often find yourself using toggle sliders as a trendy alternative to checkboxes. Today Sebastian Sandqvist will be creating one using plain CSS3 and HTML.

Create a new HTML document and add a span tag with a class of toggle-bg. This will be the background area for the toggle. To make the toggle functional, Sebastian Sandqvist will be using some invisible radio inputs. These have just a couple of requirements: they must have different values and same name. He’ll be using on and off as my values, with a name of toggle, but you may change this depending on your usage. For example, maybe you’ll be toggling between yes and no. Add the input to the span you created earlier.