input 태그 타입 checkbox, radio 스타일 커스텀하기

checkbox를 커스텀하는 예제입니다. radio도 똑같은 방법으로 커스텀하면 될 것 같습니다.

 

체크 전

체크 후

 

 

HTML

<div class="wrap">
  <input id="agree" type="checkbox">
  <label for="agree">
    <span>환불 계좌 정보를 정확하게 입력하였습니다.</span>
  </label>
</div>

 

CSS

.wrap input[type="checkbox"]{ 
	position:absolute; 
    width:1px; 
    height:1px; 
    padding:0; 
    margin:-1px; 
    overflow:hidden; 
    clip:rect(0,0,0,0); 
    border:0; 
}
.wrap input[type="checkbox"] + label{ 
	display:inline-block; 
    position:relative; 
    padding-left:26px; 
    cursor:pointer; 
}
.wrap input[type="checkbox"] + label:before{ 
	content:''; 
    position:absolute; 
    left:0; 
    top:3px; 
    width:18px; 
    height:18px; 
    text-align:center; 
    background:#fff; 
    border:1px solid #ccc; 
    box-sizing:border-box; 
}

/* 보여질 부분의 스타일을 추가하면 된다. */
.wrap input[type="checkbox"]:checked + label:after{ 
	content: ''; 
    position:absolute; 
    top:3px; 
    left:0; 
    width:18px; 
    height:18px; 
    background-color:skyblue;
}

 

 

예제

See the Pen xxwMxYX by leeyoonseo (@okayoon) on CodePen.