input checkbox 만들기

 

<div class="info">
   <input type="checkbox" id="agree" >
   <label for="agree">동의</label>
</div>

부트스트랩 체크 아이콘을 배경 이미지로 넣어 사용함 

input[type='checkbox'] { display:flex; align-items:center; justify-content:center; margin-top:1px; margin-right:15px; padding:0; border:1px solid #bbb; outline:none;min-width: 24px; width:24px; height:24px; cursor:pointer; appearance:none } 
input[type='checkbox']::after { display:none; font-family:"bootstrap-icons", sans-serif; font-size:1rem; font-weight:bold; color:white; content:'\F633' } 
input[type='checkbox']:checked { background-color:#4a32e3 } 
input[type='checkbox']:checked::after { display:block } 
.info label { cursor:pointer; color: #E8E8E8; }