The Best “CSS Checkbox Hack” Tutorials on Tuts+

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 input with a label, we set its id value equal to the label’s for value. 
<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: none property, as it leads to keyboard accessibility restrictions.
[type="checkbox"],
[type="radio"] {
  position: absolute;
  left: -9999px;
}
  • We use the :checked pseudo-class to toggle the input state and provide the associated styles. Although the input is 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

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 input with a label, we set its id value equal to the label’s for value. 
<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: none property, as it leads to keyboard accessibility restrictions.
[type="checkbox"],
[type="radio"] {
  position: absolute;
  left: -9999px;
}
  • We use the :checked pseudo-class to toggle the input state and provide the associated styles. Although the input is 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.

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!

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


Print Share Comment Cite Upload Translate Updates
APA

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/

MLA
" » The Best “CSS Checkbox Hack” Tutorials on Tuts+." George Martsoukos | Sciencx - Monday July 25, 2022, https://www.scien.cx/2022/07/25/the-best-css-checkbox-hack-tutorials-on-tuts/
HARVARD
George Martsoukos | Sciencx Monday July 25, 2022 » The Best “CSS Checkbox Hack” Tutorials on Tuts+., viewed ,<https://www.scien.cx/2022/07/25/the-best-css-checkbox-hack-tutorials-on-tuts/>
VANCOUVER
George Martsoukos | Sciencx - » The Best “CSS Checkbox Hack” Tutorials on Tuts+. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/25/the-best-css-checkbox-hack-tutorials-on-tuts/
CHICAGO
" » The Best “CSS Checkbox Hack” Tutorials on Tuts+." George Martsoukos | Sciencx - Accessed . https://www.scien.cx/2022/07/25/the-best-css-checkbox-hack-tutorials-on-tuts/
IEEE
" » The Best “CSS Checkbox Hack” Tutorials on Tuts+." George Martsoukos | Sciencx [Online]. Available: https://www.scien.cx/2022/07/25/the-best-css-checkbox-hack-tutorials-on-tuts/. [Accessed: ]
rf:citation
» The Best “CSS Checkbox Hack” Tutorials on Tuts+ | George Martsoukos | Sciencx | 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.

You must be logged in to translate posts. Please log in or register.

Related Posts