HTML & CSS
Article

Screencast: Building Smarter UI Interactions using :checked

By Ryan Seddon

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.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.