Home > Tips & Tricks > Custom Checkbox As Toggle Button

Custom Checkbox As Toggle Button

by

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
Untitled by Aman Mehra (@amanmehra)
on CodePen.

Being Tricky 😉

How to Check if Element Exists Using jQuery

How to Check if Element Exists Using jQuery?

Top React JS Interview Questions And Answers

Top 100+ React JS Interview Questions And Answers

How to Print a Page using jQuery?

How to Print a Page using jQuery?

How to Bind Dynamically Added Elements with jQuery?

How to Bind Dynamically Added Elements with jQuery?

When to Use Traits in PHP

When to Use Traits in PHP – A Comprehensive Guide

Can PHP be used for Mobile Applications Development?

Can PHP be used for Mobile Applications Development?

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment