YogeshChauhan . com

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:

amazon

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 add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

List of all Pseudo Elements in CSSCSSWhat’s the difference between variables in CSS and SCSS (Sass)?CSSAlternate Style Sheets in CSSCSSThe basics of CSS Box modelCSSHow to define variables in SCSS (Sass)?SCSSKilling A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscHow to get the first element with a class name xyz using JavaScript?JavaScriptWhat is ECMAScript?JavaScriptHow to add a ribbon inside a container using CSS?CSSHow to apply style to the first-child using jQuery?jQueryHow to create bouncing balls using HTML canvas and JavaScript?HTMLCREATE DATABASE in PostgreSQLPostgres