YogeshChauhan.com

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

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:

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

How to list all PHP variables to debug the script?PHPDebugging in WordPress Part 1: WP_DEBUGWordPressIntroduction to components and templates Part 2: Templates and viewsAngularWhat are Identifiers in JavaScript?JavaScriptWhat is Object Mutability in JavaScript?JavaScriptHow to control file extensions with an .htaccess file?MiscHow to change style of nth-child using jQuery?jQueryDebugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPressThe 7 Security Objectives of Any Organization for IT and Network SecurityMiscSome Useful Operators in The SQL WHERE ClauseSQL/MySQLthe box-sizing property in CSSCSSReading Multiple Inputs in SwiftSwift