<div class="checkbox"> <input type="checkbox" id="some_checkbox"> <label for="some_checkbox">Awesome checkbox</label> </div>
.checkbox input[type=checkbox] { position: absolute; top: -99999px; opacity: 0; } .checkbox input[type=checkbox] + label { padding-left: 20px; position: relative; } .checkbox input[type=checkbox] + label::before { content: ''; display: block; position: absolute; width: 12px; height: 12px; left: 0; top: 0; border: 1px solid #999; background-color: #ddd; border-radius: 3px; box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.3); } .checkbox input[type=checkbox]:checked + label::after { content: ''; display: block; position: absolute; width: 8px; height: 5px; left: 2px; top: 2px; border-bottom: 2px solid #000; border-left: 2px solid #000; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }