Easy CSS3 Checkboxes and Radio Buttons

Ever wondered how to style checkboxes and radio buttons, but without JavaScript? Thanks to CSS3 you can! What exactly will Nick Dugger be doing? Well, due to CSS3's nifty little :checked pseudo selector, he is able to target an element based on its checked (or unchecked) status. He can then use the “+” adjacent sibling selector from CSS2.1 to target the element directly following the checkbox or radio, which in his case is the label.

Now, Nick Dugger starts off by creating his HTML and CSS files (or however you prefer handling your styles) and get to work. For the purpose of getting you on your way, he will only demonstrate this technique on a checkbox, but the process for radio buttons is identical. He starts by creating his checkbox input, followed by a label. Now, just in case you don’t know much about the <label> element, you must connect the input and the label in order for you to interact with the input through the label. This is done by using, for="" and the input’s ID.