HTML & CSS
Article
By Ryan Seddon

Screencast: Building Smarter UI Interactions using :checked

By Ryan Seddon
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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.

--ADVERTISEMENT--

Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?