<inputtype="checkbox"/>input[type='checkbox']{appearance:none;outline:none;display:block;position:relative;text-align:center;cursor:pointer;width:28px;height:28px;margin:0auto;}// チェックボックスのデザインinput[type='checkbox']::before{display:block;position:absolute;content:'';width:28px;height:28px;background:#fff;border:solid2px#01a2c1;border-radius:3px;}// チェックボックスの背景をチェック後に変更input[type='checkbox']:checked::before{background-color:#01a2c1;}// チェックマークのデザインinput[type='checkbox']::after{display:block;content:'';position:absolute;left:10px;top:5px;width:8px;height:16px;border-right:3pxsolid#fff;border-bottom:3pxsolid#fff;transform:rotate(45deg);// チェックしてないときは隠すopacity:0;}// チェックするとチェックマークの透明化を解除input[type='checkbox']:checked::after{opacity:1;}