Yogesh Chauhan's Blog

How to convert an HTML radio buttons into a toggle switch using CSS?

in CSS & HTML on March 28, 2021

HTML

Let’s start with a simple HTML. Nothing fancy we need here.

CSS

To give those input radio buttons a switch appearance, we need to have those elements next to each other. For that we can use multiple ways for e.g. making the container a flex or a grid or just set the margin 0.

We’ll go with a flex option.

Also, we’ll remove the original radio button and convert the labels into our switch. Let’s remove the radio buttons first. We can just set the height and width to 0.

Even after that, we’ll see two small dot of radio buttons. We’ll remove those by setting the position property of those radio buttons as an absolute and clipping it afterwards.

Just like this:

Let’s make the switch now by applying some basic styles to the labels.

We still need style when the input radio button is selected. Let’s add that now.

Looks nice. Let’s carve out the corners of those labels to make it look nice. We can target those labels by adding ID or class or simply just by first-of-type and last-of-type.

Just like this:


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
What’s the difference between visibility: hidden and display: none?CSSHow to add navigation menu in Angular 9 app?AngularOpen Source Security Tools for Defense SecurityMiscellaneousHow to solve “framework not found” error in Swift?SwiftHow to compress images with gulp in WordPress?WordPressHow to disable right click and drag and drop of images using jQuery?jQueryDifference between :where and :is in CSSCSSWhat is XP (Extreme Programming) and When should it be used?Miscellaneous:in-range and :out-of-range selector in CSSCSSHow to remove N/A from Radio Button list in Drupal?Drupal6 Different Functions to Sort Arrays in PHPPHPCrypto.getRandomValues() method in JavaScriptJavaScript