cssでcheckboxカスタマイズのサンプル

CSS 
<html>
<head>
<style>
label.check {
 box-sizing: border-box;
 position: relative;
 vertical-align: middle;
}
label.check>input[type='checkbox']{
display:none;
appearance: none;
}
label.check>span:before{
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;;
  top: 2px;
  left: 0;
  content: '';
  margin : 0 0.5rem 0 0;
  border:1px solid #ccc;
}

label.check>input[type='checkbox']:checked + span:after {
    display: inline-block;
    width: 6px;
    height: 12px;
    position: absolute;
    top: 0px;
    left: 5px;
    content: '';
    margin: 0 0.5rem 0 0;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
}
</style>
</head>
<body>
<label class="check"><input type="checkbox" name="item1" value="1"><span>アイテム１</span></label>
<label class="check"><input type="checkbox" name="item2" value="2"><span>アイテム２</span></label>
</body>
</html>