Custom checkbox using only CSS and HTML

Answer 1

My previous answer is wrong because it uses the ::before pseudo-element selector on an element that isn't a container. Thanks to @BoltClock for pointing out my error. So, I came up with another solution that uses the Checkbox Hack and the CSS3 sibling selector (~).

Demo at CodePen

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
input[type=checkbox] ~ label::before {
  content: '\2713';
  display: inline-block;
  text-align: center;
  color: white;
  line-height: 1em;
  width: 1em;
  height: 1em;
  border: 1px inset silver;
  border-radius: 0.25em;
  margin: 0.25em;
}
input[type=checkbox]:checked ~ label::before {
  color: black;
}

  

    
    First Choice
  
  

    
    Second Choice
  

I didn't use StackOverflow's "Run Code-Snippet" functionality because it does something weird when I run it. I think it's because of the checkbox hack.