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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
Is Software Really Eating The World? I don’t think soMiscellaneousHow to create ‘share on LinkedIn’ link using just HTML?HTMLWindow setInterval() Method in JavaScriptJavaScriptHow to create a pricing table using flex in CSS?CSSWordPress 5.7 is migrating to latest jQuery version and people are freaking outjQuery3 Types of Arrays in PHPPHPIntroduction to components and templates Part 3: Data bindingAngularHow to define visibility for a property in PHP?PHPWordPress Plugin: Things to knowWordPressHow to refresh a page using PHP at regularly occurring intervals?PHPWhat is Conditional Rendering in React?ReactCustom Post Type Template Files in WordPressWordPress