Skip to main content

Screencast: Building Smarter UI Interactions using :checked

By Ryan Seddon

Blogs

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

The :checked pseudo-class is an often overlooked gem in CSS. When paired with checkboxes, radio buttons, and some accompanying CSS selectors, such as the direct sibling combinator (+), it opens up some powerful applications.

Using :checked means that your CSS can react to state alone, without the need for JavaScript. This makes :checked a must in the CSS developer’s utility belt.

Watch Ryan guide you through building an iOS toggle switch using these techniques. You can download the code sample from GitHub.

Ryan Seddon is Tech Lead at Zendesk, an open source junkie and a CSS abuser. Coming from a specialist front-end role he's since ventured into full stack development. He regular contributes to open-source projects such as Modernizr, gives talks at conferences and is just all round enthusiastic about the software. His personal website is http://www.thecssninja.com

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.