Label Based Checkbox

by Kyle Mitofsky

HTML

<h3>
  Inputs... we don't need no stinkin Inputs
</h3>

<div class="label-check">
  <div>
    <input type="checkbox" name="checkGrp1" id="check1_Opt1">
    <label for="check1_Opt1">A Label Here 1</label>
  </div>
  <div>
    <input type="checkbox" name="checkGrp1" id="check1_Opt2" checked>
    <label for="check1_Opt2">A Label Here 2</label>
  </div>
</div>

<div class="label-check">
  <div>
    <input type="radio" name="radioGrp1" id="radio1_Opt1">
    <label for="radio1_Opt1">Radio Label 1</label>
  </div>
  <div>
    <input type="radio" name="radioGrp1" id="radio1_Opt2" checked>
    <label for="radio1_Opt2">Radio Label 2</label>
  </div>  
</div>


<h3>Normies</h3>

<div>
  <div>
    <input type="checkbox" name="checkGrp2" id="check2_Opt1">
    <label for="check2_Opt1">A Label Here 1</label>
  </div>
  <div>
    <input type="checkbox" name="checkGrp2" id="check2_Opt2" checked>
    <label for="check2_Opt2">A Label Here 2</label>
  </div>
</div>

<div>
  <div>
    <input type="radio" name="radioGrp2" id="radio2_Opt1">
    <label for="radio2_Opt1">Radio Label 1</label>
  </div>
  <div>
    <input type="radio" name="radioGrp2" id="radio2_Opt2" checked>
    <label for="radio2_Opt2">Radio Label 2</label>
  </div>  
</div>

<h3>Unicodes - The Best</h3>
&#9744; Ballot Box                   (<code>U+2610</code>) <br/>
&#9745; Ballot Box with Check         (<code>U+2611</code>) <br/>
&#11096; Heavy Circle                (<code>U+2B58</code>) <br/>
&#9673;  Fisheye                     (<code>U+25C9</code>) <br/>

<h3>Unicodes - The Rest</h3>
&#9633;  White Square                 (<code>U+25A1</code>) <br/>
&#11036; White Large Square           (<code>U+2B1C</code>) <br/>
<hr>
&#10696; Squared Square              (<code>U+29C8</code>) <br/>
&#9635;  White Square Containing Black Small Square  (<code>U+25A3</code>) <br/>
<hr>
&#9900;  Medium Small White Circle   (<code>U+26AC</code>) <br/>
&#9675;  White Circle                (<code>U+25CB</code>) <br/>
&#11604; Tifinagh...

CSS

body {
  font-size:1.5em;
  color: #2b2b2b;
  background:white;
}
.label-check input {  display:none; }

.label-check label::before {
  width: 1.4em;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  color: black;
  transition: color .3s ease;
  text-shadow: 0px 0px 1px #cccccc;
}
.label-check label:hover::before {
  text-shadow: 0px 0px 1px #6286d0;
}
.label-check [type='checkbox']:checked + label::before,
.label-check [type='radio']:checked    + label::before{ 
  color: #056dce;
}

.label-check [type='checkbox']         + label::before {  content: "\2610";}
.label-check [type='checkbox']:checked + label::before {  content: "\2611";}
.label-check [type='radio']            + label::before {  content: "\2B58";}
.label-check [type='radio']:checked    + label::before {  content: "\25C9";}