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
How to include CSS and JavaScript files in your WordPress plugin?WordPressWhat is an API?MiscellaneousAlternate Style Sheets in CSSCSSHow to install PuTTY on a MacOS?MiscellaneousHow to set up the local environment and workspace for Angular development?AngularRecursion in JavaScriptJavaScriptKanban vs Scrum: The two frameworks of agile principlesMiscellaneousHow to add and remove capabilities from a role in WordPress?WordPressLIMIT and OFFSET in PostgresPostgresHTML canvas methodsHTMLHow to solve “framework not found” error in Swift?SwiftHow to enable and disable button using JavaScript?JavaScript