<!-- Checkmark CSS --> <style> .checkmark { display: inline-block; width: 22px; height: 22px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ transform: rotate(45deg); } .checkmark_stem { position: absolute; width: 3px; height: 9px; background-color: #ccc; left: 11px; top: 6px; } .checkmark_kick { position: absolute; width: 3px; height: 3px; background-color: #ccc; left: 8px; top: 12px; } </style> <!-- checkmark HTML --> <span class="checkmark"> <div class="checkmark_stem"></div> <div class="checkmark_kick"></div> </span>label input { visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */ display: block; height: 0; width: 0; position: absolute; overflow: hidden; } label span {/* <-- Style the artificial checkbox */ height: 10px; width: 10px; border: 1px solid grey; display: inline-block; } [type=checkbox]:checked + span {/* <-- Style its checked state */ background: black; }