I wanted to make form controls a little more finger friendly using the latest/greatest tricks. All while maintaining accessibility. Some solutions I found involved using images, and display: none. Unacceptable. This uses plain 'ol CSS to get the job done

index.html

<h3>The Check-BIOX!</h3>
<input type="checkbox" id="howudoin"/> <label for="howudoin"> Sup?</label>

<h3>The ham radio group</h3>
<div>
<input type="radio" name="ham" value="1" id="brkrbrkr"/> <label for="brkrbrkr">Breaker breaker</label>
</div><div>
<input type="radio" name="ham" value="2" id="tenfour"/>
<label for="tenfour">10-4</label>
</div>

style.less

body{ background: #ccc; font-family: sans-serif; }
input[type="checkbox"], input[type="radio"]{
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  width: 1px; height:1px;
  margin: -1px; padding: 0; border: 0; 
}


input[type="checkbox"] + label, input[type="radio"] + label{
   vertical-align: middle;
   display: inline-block;
   margin-bottom: 1.5%;
   width: auto;
   min-width: 200px;
    &:before{
      content: "\A";
      color: #ccc;
      font-size: 42px;
      line-height: 42px;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
      position:relative;
      border-radius:5px;
      background: #999;
      height:42px;
      width: 42px;
      margin-right: 1.25%;
      text-shadow: 1px 1px 3px #333;
      box-shadow: 1px 1px 0px #f3f3f3, 0px 0px 15px #333 inset;
  }
}

input[type="radio"] + label{
  &:before{
   content: "●";
   color: #666;
   border-radius: 22px;
  }
}

input[type="checkbox"]:checked + label, input[type="radio"]:checked + label{
  color: #1b6100;
  &:before{
   content: "✔";
    color: #000;
    font-size: 42px;
    line-height: 42px;
    
  }
}

input[type="radio"]:checked + label{
  &:before{
    content: "●";
  }
}