Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a CSS-only toggle switch with custom styling?
Asked on Mar 16, 2026
Answer
Creating a CSS-only toggle switch involves using a checkbox input and styling it with CSS to resemble a switch. Here's a simple example to guide you.
<!-- BEGIN COPY / PASTE -->
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
- This example uses a hidden checkbox input to control the toggle state.
- The ".slider" class styles the switch, and the ":before" pseudo-element represents the toggle knob.
- Transitions are used for smooth animation when toggling.
- Ensure the checkbox input is accessible by providing appropriate labels and focus styles in a real-world scenario.
Recommended Links:
