Is there any way to make this checkbox HTML structure as a slide with pure CSS?
As a web developer, you often encounter the need to create interactive and visually appealing user interfaces. One common requirement is the ability to transform a standard checkbox into a sliding toggle switch. While this can be accomplished using JavaScript, there is a way to achieve the same effect using pure CSS.
In this article, we'll explore how to take the provided HTML and CSS code and transform it into a sliding checkbox using only CSS. This approach can be particularly useful when you want to maintain a lightweight and performant solution without the added overhead of JavaScript.
The HTML Structure
Let's start by examining the existing HTML structure:
<label for="tmcp_choice_0_0_1_1519167210" class="toggle-container">
<input class="tmcp-field ingredientepizza tmhexcolor_0_0_1_1519167210 tm-epo-field tmcp-checkbox" name="tmcp_checkbox_0_0_1519167210" data-limit="" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[""]" data-original-rules="[""]" data-rulestype="[""]" value=" molho de tomate_0" id="tmcp_choice_0_0_1_1519167210" tabindex="1" type="checkbox" checked="checked">
<span for="tmcp_choice_0_0_1_1519167210"></span>
<span class="tc-label tm-label"> molho de tomate</span>
</label>
The key elements in this structure are:
- The
<label>
element, which serves as the container for the checkbox and its associated label.
- The
<input>
element with type="checkbox"
, which represents the actual checkbox.
- The two
<span>
elements, one for the custom checkbox visual and the other for the label text.
Transforming the Checkbox into a Sliding Toggle
To create the sliding toggle effect, we'll need to leverage the power of CSS. Here's how you can modify the provided CSS to achieve the desired result:
/* Reset the default checkbox appearance */
input[type="checkbox"] {
display: none;
}
/* Styling the toggle container */
.toggle-container {
position: relative;
display: inline-block;
width: 200px;
height: 100px;
background-color: #2b2b2b;
border-radius: 50px;
box-shadow: 0 0 2px rgba(43, 43, 43, 1);
cursor: pointer;
}
/* Styling the toggle slider */
.toggle-container::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 80px;
height: 80px;
background-color: #ffffff;
border-radius: 50px;
transition: left 0.4s ease-in-out;
}
/* Styling the toggle label */
.tc-label {
position: absolute;
bottom: -40px;
left: 0;
width: 100%;
text-align: center;
font-size: 16px;
color: #2b2b2b;
}
/* Styles for the "checked" state */
.toggle-container.active {
background-color: #49a844;
box-shadow: 0 0 2px rgba(73, 168, 68, 1);
}
.toggle-container.active::before {
left: 110px;
transform: rotate(360deg);
}
Here's how the CSS code works:
- The
input[type="checkbox"]
rule hides the default checkbox element, as we'll be creating a custom visual representation.
- The
.toggle-container
class styles the overall toggle container, including its size, background color, and border radius.
- The
.toggle-container::before
pseudo-element creates the sliding toggle itself, with its own background color and border radius.
- The
.tc-label
class styles the label text, positioning it below the toggle container.
- The
.toggle-container.active
and .toggle-container.active::before
rules define the styles for the "checked" state of the toggle, including the background color change and the sliding animation.
The key to making this work is the use of the :before
pseudo-element, which allows us to create the sliding toggle without the need for additional HTML elements. When the .active
class is applied, the styles change, and the :before
element slides to the right, creating the toggle effect.
Applying the Sliding Checkbox
To make the checkbox a sliding toggle, you can simply add the .toggle-container
class to the existing <label>
element in your HTML:
<label for="tmcp_choice_0_0_1_1519167210" class="toggle-container">
<input class="tmcp-field ingredientepizza tmhexcolor_0_0_1_1519167210 tm-epo-field tmcp-checkbox" name="tmcp_checkbox_0_0_1519167210" data-limit="" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[""]" data-original-rules="[""]" data-rulestype="[""]" value=" molho de tomate_0" id="tmcp_choice_0_0_1_1519167210" tabindex="1" type="checkbox" checked="checked">
<span for="tmcp_choice_0_0_1_1519167210"></span>
<span class="tc-label tm-label"> molho de tomate</span>
</label>
The JavaScript code provided in the initial code snippet is no longer necessary, as the sliding toggle functionality is now implemented entirely with CSS.
By using this approach, you can create a visually appealing and interactive checkbox UI element without relying on JavaScript. This can be particularly beneficial in situations where you want to maintain a lightweight and performant solution, or when working with frameworks or platforms that have strict restrictions on the use of JavaScript.
Remember, the CSS solution provided here is a starting point, and you may need to adjust the styles to fit your specific design requirements. Additionally, you can further enhance the toggle's accessibility by adding appropriate ARIA attributes and keyboard support.
I hope this article has helped you understand how to create a sliding checkbox using pure CSS. If you have any questions or need further assistance, feel free to reach out. For more information on how Flowpoint.ai can help you identify and fix technical errors that impact your website's conversion rates, be sure to check out our website.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.