So here we go again.

Three demos of pure CSS checkboxes and radio buttons.

I generally keep my demos raster free and bereft of extra styling. The reason is so you can add your own styles and not have to override the demo styles.

You may notice a color called rebeccapurple in the demos. This is a new color created in honor of Eric Meyer's young daughter, who passed away sometime in 2014. Rebecca's favorite color was purple. Eric Meyer seems to be a beautiful person, and was the reason for my introduction to CSS. He knows the innards of Cascading Style Sheets like no one else. He has a web log here, and has bared his heart and soul to the world during the time of his daughter's illness. Perhaps his words will be of great comfort to parents of little children with terminal illness.

DEMO 1: Pure CSS Radio Buttons and Checkboxes: Solid Checked Color

See the Pen CSS Radio Buttons and Checkboxes: Solid by Karen Menezes (@imohkay) on CodePen.

DEMO 2: Pure CSS Radio Buttons and Checkboxes: Bordered Checked State

Uses a neat inset box shadow to achieve this. Took me a while to figure out.

See the Pen CSS Radio Buttons and Checkboxes: Border by Karen Menezes (@imohkay) on CodePen.

DEMO 3: Pure CSS Radio Buttons and Checkboxes: Icon Checked State

Using Font Awesome via the CDN, but use whatever you like.

See the Pen CSS Radio Buttons and Checkboxes: Custom icon by Karen Menezes (@imohkay) on CodePen.

Look Ma, no JS. More importantly, you can easily change everything including the widths and heights of the form elements and they won't barf. Works in several browsers also known as modern browsers.