Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create toggle switch by using HTML and CSS?
To create a toggle switch using HTML and CSS, we use a checkbox input element and style it to create an interactive switch interface. A toggle switch is a user interface element that allows users to switch between two states, typically 'on' and 'off'.
Syntax
/* Basic toggle switch structure */
.toggle {
position: relative;
display: block;
/* dimensions and styling */
}
.toggle input {
opacity: 0; /* Hide default checkbox */
}
.toggle-label {
/* Background styling */
}
.toggle-handle {
/* Movable switch handle */
transition: all 0.3s ease;
}
input:checked ~ .toggle-handle {
/* Handle position when checked */
}
Example: Creating a Toggle Switch
The following example creates a complete toggle switch with ON/OFF labels and smooth transition effects
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
.toggle {
position: relative;
display: inline-block;
width: 80px;
height: 40px;
margin: 20px;
cursor: pointer;
}
.toggle-input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
}
.toggle-label {
position: relative;
display: block;
height: 100%;
background: #ccc;
border-radius: 20px;
transition: background 0.3s ease;
font-size: 12px;
line-height: 40px;
color: white;
font-weight: bold;
}
.toggle-label:before {
content: "OFF";
position: absolute;
right: 8px;
top: 0;
}
.toggle-label:after {
content: "ON";
position: absolute;
left: 12px;
top: 0;
opacity: 0;
}
.toggle-handle {
position: absolute;
top: 2px;
left: 2px;
width: 36px;
height: 36px;
background: white;
border-radius: 50%;
transition: left 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.toggle-input:checked ~ .toggle-label {
background: #4CAF50;
}
.toggle-input:checked ~ .toggle-label:before {
opacity: 0;
}
.toggle-input:checked ~ .toggle-label:after {
opacity: 1;
}
.toggle-input:checked ~ .toggle-handle {
left: 42px;
}
</style>
</head>
<body>
<h3>Toggle Switch Example</h3>
<label class="toggle">
<input class="toggle-input" type="checkbox">
<span class="toggle-label"></span>
<span class="toggle-handle"></span>
</label>
</body>
</html>
A toggle switch appears with gray background showing "OFF". When clicked, it smoothly slides to the right, changes to green background, and displays "ON". The white circular handle moves with smooth animation.
Key Components
The toggle switch consists of three main parts
- Hidden checkbox input: Provides the toggle functionality
- Toggle label: Creates the background with ON/OFF states
- Toggle handle: The movable circular switch element
Styling Techniques
Several CSS techniques make the toggle switch work effectively
- opacity: 0 hides the default checkbox appearance
- :checked pseudo-class detects when the switch is toggled
- transition property provides smooth animation effects
- position: absolute allows precise positioning of elements
Conclusion
Creating a toggle switch with HTML and CSS involves hiding a checkbox input and styling custom elements to create an interactive switch interface. The combination of CSS transitions and the :checked pseudo-class provides smooth, user-friendly toggle functionality.
Updated on: 2026-03-15T16:22:59+05:30
18K+ Views
Advertisements