Another Pure CSS Checkbox Article

Karen Menezes on November 1, 2014

Code

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, if you'd like to take a look.

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

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

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.

Credits

Image by Tara Winstead on Pexels

Related Tags

CSS Checkbox CSS Radio Button ALL TAGS

karen.menezes@gmail.com