iOS engineer who likes clean, simple designs and sans-serif.

Loading

Checkbox… err Radio Button Hack

While I was building @GA’s Valentine’s Day promotion It’s a Date, I ran into a another form styling issue: checkboxes and radio buttons.  Last time, when I had issues with form drop-downs, I used Javascript and lists instead of form selects.

While researching a good way to approach this, I saw a cool checkbox hack on CSS Tricks that I wanted to try (that didn’t use Javascript). Yes, it’s a little hacky, but seemed fun.

How is that possible?  Well, you can use the “:checked” state in CSS.

input[type=checkbox]:checked ~ div {
  background: red;
}

Here’s what I did:
1)  I created a solid grey circle with a grey border around it in a div.
(Credit @jontroutman for the cool idea.)

ga-uncheckedbox

div.toggle {
  background: #e2e2e2;
  border: 6px solid #e2e2e2;
  border-radius: 1.5em;
  padding: 0.5rem;
  float: left;
  margin-top: 0.25rem;
  margin-right: 1rem;
}

2) When you click on the label choice, it changes the background to black, but still has the grey border. This gives the effect of a radio button. (I also had to adjust the code to handle multiple radio buttons instead of checkboxes too.)

ga-checkbox

#toggle-one:checked ~ .toggles label > #one,
#toggle-two:checked ~ .toggles label > #two,
#toggle-three:checked ~ .toggles label > #three {
  background: #000;
}

Check out the whole project at It’s a Date.

Leave a Comment