Yes, you do that by adjusting the width
, height
, background-color
, and transform
values in the CSS to suit your design preferences.
Key takeaways:
CSS provides an efficient, customizable way to create interactive toggle switches without relying on JavaScript, offering a lightweight solution for UI design.
The toggle switch is built using an <input>
element (checkbox) and a <label>
element, with the label acting as the visible toggle interface and the checkbox managing the state.
The checkbox is hidden using display: none;
, and the label is styled to resemble a rounded toggle switch with smooth transitions for color changes and interactivity.
The ::before
pseudo-element creates the movable inner circle of the switch, and the transform
property is used for smooth animation when toggling between the "on" and "off" states.
The toggle switch is highly customizable in terms of size, color, and transition effects, making it suitable for a wide range of web design applications.
CSS is a powerful tool that allows us to control the look and layout of our web pages. One useful feature you can create with CSS is a toggle switch. It is a user interface element that allows users to switch between two states, like an on/off switch. Implementing toggle switches using CSS provides a lightweight and customizable solution compared to JavaScript-based alternatives.
In this answer, we will look at how to create a simple yet interactive toggle switch.
Before we begin styling the toggle switch, let’s set up the basic HTML structure. We will create an HTML structure using an <input>
element of type checkbox
and a <label>
element to create the toggle mechanism.
<body><span>Toggle Switch:</span><input type="checkbox" id="toggle" /><label for="toggle"></label></body>
The HTML structure consists of the following elements:
The <span>
element provides a descriptive label for the toggle switch, enhancing accessibility and user understanding.
An <input>
element of type checkbox
. It serves as the underlying mechanism controlling the toggle state. It is assigned an id
of "toggle" for association with the label. This checkbox will be hidden and used to control the state of the toggle switch.
The <label>
element, linked to the checkbox via the for
attribute, acts as the visible toggle switch. Clicking the label toggles the checkbox state.
Practice creating toggle switches by trying out this project, Build a Custom Form Maker with MERN Stack, where we create a full stack image-sharing application focusing on styling the application.
With the HTML structure in place, we can apply CSS to style the toggle switch, making it interactive and visually appealing. Styling the toggle switch includes multiple steps, which we will review individually.
First, we’ll hide the default checkbox to allow for a custom-styled switch. In the code below, setting display: none;
ensures the checkbox is invisible, allowing the label to serve as the toggle interface.
#toggle {display: none;}
Next, we'll style the <label>
to resemble a toggle switch.
label {display: inline-block;width: 50px;height: 25px;background-color: #ccc;border-radius: 25px;position: relative;cursor: pointer;margin-left: 10px;transition: background-color 0.3s;}
Line 2: The display
property is set to inline-block
allowing the label to sit in line with other elements while maintaining block properties.
Line 3–4: The width
and height
define the size of the switch.
Line 5: The background-color
is set to a neutral color (#ccc
) that serves as the default "off" state.
Line 6: The border-radius
property is set to 25px
, making the label a fully rounded oval shape.
Line 7: The position
property is set to relative
which positions the switch elements correctly for the inner circle.
Line 8: The cursor
property is set to pointer
to indicate that it can be interacted with.
Line 9: The margin-left
property is set to get space between the span label and the switch.
Line 10: The transition
property smoothens color changes when toggling.
We'll use the ::before
pseudo-element to create the movable circle within the switch.
label::before {content: "";position: absolute;top: 3px;left: 3px;width: 19px;height: 19px;background-color: white;border-radius: 50%;transition: transform 0.3s;}
Line 2: Setting the content
property to an empty string ensures the pseudo-element is rendered.
Line 3: The absolute
position allows precise placement within the label.
Line 4–5: The top
and left
properties add an 3px
offset from the top and left edges.
Line 6–7: The width
and height
size the element slightly smaller than the label to fit neatly.
Line 8: The background-color
is set to a white
, which makes the circle stand out against the switch background.
Line 9: The border-radius
property is set to 50%
to create an appropriate-sized circle in the toggle.
Line 10: The transition
property enables smooth movement when toggling.
When the checkbox is checked, we want the switch to indicate the "on" state by changing color.
#toggle:checked + label {background-color: #2196F3;}
The :checked
pseudo-class targets the checked state of the checkbox. Using the adjacent sibling selector (+
), we change the label's background color to signify activation.
Finally, we’ll add an animation to the toggle effect, making the inner part of the switch move when it is checked.
#toggle:checked + label::before {transform: translateX(25px);}
When the checkbox is checked, this rule selects the inner part of the switch, represented by the ::before
pseudo-element. It applies a transformation to the transform
property, specifically translating the element along the X-axis by 25px
, aligning it with the "on" state. This creates the effect of moving the inner part to the right and animates the toggle effect.
Want to get hands-on practice with HTML and CSS in a real-world application? Try out this project, Build a Microblogging App Using PHP, HTML, JavaScript, and CSS, where we create a microblogging platform with search and admin features.
Here's the full HTML and CSS code for the toggle switch. Clicking the switch will toggle between the "off" (gray) and "on" (blue) states with a smooth animation.
Haven’t found what you were looking for? Contact Us
Free Resources