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.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

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