This content originally appeared on Envato Tuts+ Tutorials and was authored by George Martsoukos
Today we’ll discuss the “CSS checkbox hack technique”, a neat way to simulate JavaScript’s click event on CSS elements. Along the way, we’ll explore the best tutorials that use this technique and are available on Envato Tuts+.
What is the “CSS Checkbox Hack”?
This is a technique that allows you to control certain styles depending on whether checkboxes (or radio buttons) are checked or not. You might typically see the checkbox hack used for toggling visibility of tabs, dropdown menus, and so on.
Here are the basic steps behind it:
- We associate a checkbox or a radio button with one or more labels. These don’t have to be near each other. To associate an
inputwith a label, we set itsidvalue equal to the label’sforvalue.
<input type="checkbox" id="mycheckbox"> <label for="mycheckbox" class="feedback-label">FEEDBACK</label>
- We visually hide the checkbox or radio button by applying, most of the time, absolute positioning. We avoid using the
display: noneproperty, as it leads to keyboard accessibility restrictions.
[type="checkbox"],
[type="radio"] {
position: absolute;
left: -9999px;
}
- We use the
:checkedpseudo-class to toggle theinputstate and provide the associated styles. Although theinputis hidden, we control its state via the related label. To style the target elements, we take advantage of the CSS sibling selectors like the general sibling combinator (~) and the adjacent sibling combinator (+).
[type="checkbox"]:focus + .feedback-label {
outline: 2px solid rgb(77, 144, 254);
}
[type="checkbox"]:checked ~ .form {
transform: translate(0, -50%);
}
Master Sibling Selectors
Sibling selectors are an important part of the checkbox hack—if you want to properly understand them check out these in-depth tutorials.
8 CSS “Checkbox Hack” Tutorials
Now that we know what the “checkbox hack” is all about, let's see it in action through different exercises that are available on Tuts+!
1. Pricing Table With a Monthly/Yearly CSS Toggle Switch
It’s very common nowadays for online services to offer different price points, depending on whether customers choose to pay monthly or annually. And where a scale of subscription options is available, that can create a potentially complex pricing scheme!
In this tutorial you’ll learn how to simplify your pricing tables, by adding a toggle switch to display either the monthly or the yearly prices. How is this toggle switch made? With the CSS “checkbox hack” of course!
2. Pure CSS Slideshow
Did you know that you can build a CSS-only slideshow?
The demo below covers the steps needed for building a fully functional CSS slideshow. It comes with a lot of the common slideshow features like arrow navigation, dot navigation, thumbnail navigation, and keyboard navigation.
3. Theme Switcher
In this exercise, we’re building a theme switcher. There’s a color palette from which we can select the desired color scheme.
4. Toggle Switch Component
Toggle switches are a popular design trend that we all have seen at some point. Their primary use is for adjusting settings (e.g. phone settings). They have two states (on/off), one of which is predefined like radio buttons.
This exercise shows how to develop a switch component for a to-do checklist.
5. Off-Canvas Form
Off-canvas/hidden content is another common design pattern that is mostly used in mobile layouts due to the limited space. Multilevel menus, forms, or other types of information are moved outside of the visible part of the website by default and appear when the user clicks on an associated element (link, button, etc.).
This tutorial teaches you how to build an off-canvas feedback form.
6. Accordion Component
In this exercise, we’re creating a responsive accordion. On mobile layouts, it has a vertical layout, whereas on desktop screens a horizontal one.
7. Filtering Component
This is one of my favorite exercises. Here we’re covering a way to build a filtering component. Lots of useful test cases in the real world based on it!
8. CF7: Custom Checkboxes and Radio Buttons
In this exercise, we’re learning how to create custom checkboxes and radio buttons for the WordPress Contact Form 7 (CF7) plugin. CSS for checkboxes can be messy, and the challenge here is that we don’t use our markup (we’ve to adapt to the markup produced by the plugin) but we do it quite gracefully.
Conclusion
Hopefully, this list has given you enough inspiration to understand the power of the "CSS checkbox hack technique". Enjoy the demos, read the associated tutorials, and last but not least, be sure to follow Envato Tuts+ on CodePen for more creative pens!
This content originally appeared on Envato Tuts+ Tutorials and was authored by George Martsoukos
George Martsoukos | Sciencx (2022-07-25T07:26:06+00:00) The Best “CSS Checkbox Hack” Tutorials on Tuts+. Retrieved from https://www.scien.cx/2022/07/25/the-best-css-checkbox-hack-tutorials-on-tuts/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.