The Power of :checked

The humble :checked state is often overlooked unless you're building a form, which is a downright shame. There's so much we can do with it! Anything that has two or more states (think boolean values in jQuery, if statements etc) has the potential to be done with :checked.

Please understand me—I'm not advocating for going crazy with this idea. Javascript definitely has its place in front-end work. That being said, I can't even begin to guess how many times I've seen things like "open my drawer navigation" or "toggle this state" done with javascript. These types of things are easily done with :checked, and you're using native CSS functionality so the support is really quite great. The major benefits come if someone has Javascript disabled, or you don't have the ability to modify the site's JS. Here's a few examples of what you can do very simply with :checked.

A CSS Toggle

I've seen these when the site designer chooses to offer multiple style options to their users. This one would work great for a power company or an electrician. View the Codepen

demo

See the Pen Light Switch in CSS by Jesse Couch (@designcouch) on CodePen.

A Drawer Menu

This is something I mentioned above, but it's a use-case that is tailor made for :checked. You simply style the label as your hamburger icon, and BAM. You can toggle that sucker without a single line of JS. View the Codepen

demo

See the Pen Pure CSS Drawer by Jesse Couch (@designcouch) on CodePen.

A Tabbed Container

This is a bit more advanced use of :checked, but it's something that is almost always done with JS. I haven't seen pure CSS tabs done hardly anywhere. View the Codepen

demo

See the Pen Pure CSS Tabs by Jesse Couch (@designcouch) on CodePen.

A Few Important Things to Remember

While this is all really cool stuff, there are a few things to consider when using :checked for things like this.

As with most of my shorter posts, questions can be asked and answered down in the comments. Enjoy tinkering!

Did I help you out?

Read More

←  MODX.today A Fresh Coat of Paint  →

There are 5 comments. Add Yours.

A Note from the Moderator

Thanks for taking the time to comment! I'll respond as quickly as possible if necessary. In the meantime, please keep the following in mind:

  • All comments must be appropriate. I'll delete 'em if you get nasty.
  • Please allow for response time. I'm here as much as possible, but can't always respond as quickly as some would like.
  • Please stay on topic.
  • I don't work for free—if you want custom work, feel free to get in touch and I'll write up a quote!
  1. Marco

    Marco

    May 06, 2015

    The tabbed container is particularly great. I've played around with :checked before but usually rely on jQuery. It's nice to know this is possible!

    Reply to Marco

  2. Arne Siemens

    Arne Siemens

    May 14, 2015

    Hi, actually using :checked on a Clients website for creating a accordeon-menu (a bit down the page) which is also responsive.
    Just using a toggleClass-clear around the content for making iphones start to render the height correctly.

    Reply to Arne

    1. Jesse

      Jesse

      May 15, 2015

      Nice, Arne! Would love to see the link once you're done with it.

  3. help blog

    help blog

    Oct 27, 2018

    This is fantastic! This is all really cool stuff! I'll soon check your new posts! It is a real pleasure for me to read your opinion!

    Reply to help

  4. I find the tabbed container really cool) I didn't know that it is easy to do. Thanks for an explanation. I hope you will post more useful information)

    Reply to Online