Custom Checkbox As Toggle Button

In this trick, I will show you how you can make your own custom checkbox button and style it as a toggle button.

We will hide the checkbox button with display: none and style the label with a custom style. We will use for attribute on the label that is set to the id of the checkbox, which links the label to the checkbox and allows the label to toggle the checkbox when clicked.

And the :checked pseudo-class is used to change the background color of the label when the checkbox is selected.

Here you can see the result of custom checkbox button style as toggle button.

See the Pen
by Aman Mehra (@amanmehra)
on CodePen.

Being Tricky 😉

Leave a Reply

Your email address will not be published. Required fields are marked *