html
<divclass="checkBox"><inputtype="checkbox"id="hoge"><labelfor="hoge">ラベル
</label></div>SCSS
.checkbox{&input[type='checkbox']{display:inline-block;vertical-align:middle;text-align:center;position:relative;cursor:pointer;appearance:none;outline:none;width:20px;height:20px;margin:0;}// チェックボックスのデザイン&input[type='checkbox']::before{display:inline-block;content:'';width:20px;height:20px;background:#fff;border:solid1px$gray-400;border-radius:3px;margin:0;}// チェックマークのデザイン&input[type='checkbox']::after{display:inline-block;content:'';position:absolute;left:7px;top:0px;width:8px;height:16px;border-right:3pxsolid$main;border-bottom:3pxsolid$main;transform:rotate(45deg);// チェックしてないときは隠すopacity:0;}// チェックするとチェックマークの透明化を解除&input[type='checkbox']:checked::after{opacity:1;}&label{display:inline-block;vertical-align:middle;cursor:pointer;line-height:20px;height:20px;margin:0;// margin-left: 4px;}}