체크박스 CSS 커스텀

체크박스는 대부분 그대로 사용하지 않고 디자인하는 경우가 많습니다. 

input 타입을 checkbox로 사용시 브라우저에서 제공되는 체크박스의 형태는 변형하는 것에 한계가 있습니다. 

CSS에서 셀렉터와 label태그를 이용하면 쉽게 커스텀이 가능합니다. 

 

 

1.  마크업

input의 id와 label의 for 속성 갑을 동일하게 해야 input의 체크 여부가 작동합니다.

<div class="checkboxwrap">
    <input type="checkbox" name="opt" id="chk" class="checkbox" >
    <label for="chk">&nbsp;</label>
    <label for="chk">체크박스</label>
</div>

 

2. 스타일 커스텀

방식을 이렇습니다. 

- 기존 checkbox를 숨김

- checkbox + label을 통해 체크박스 형태를 만듦

- checkbox:checked + label 을 사용하여 체크했을 때에 형태를 만듦

.checkboxwrap .checkbox{display: none!important;}
.checkboxwrap .checkbox + label {display: inline-block;background: url("체크 전 이미지") 0 0 no-repeat; background-size: cover; width: 22px; height: 22px; cursor:pointer; margin-right: 9px;}
.checkboxwrap .checkbox:checked + label {background: url("체크 후 이미지") 0 0 no-repeat; background-size: cover; }

 

radio도 똑같은 방식으로 적용할 수 있습니다. 

 

1. 마크업

<div class="radiowrap" style="margin-bottom: 12px;">
    <input type="radio" name="options" id="opt1" class="radio" checked>
    <label for="opt1">&nbsp;</label>
    <label for="opt1">라디오1 checked</label>
</div>

2. 스타일 커스텀

체크시 라벨도 변경해 주고 싶다면 input + label + label 을 통해 선택할 수 있습니다.

.radiowrap .radio{display: none!important;}
.radiowrap .radio + label {display: inline-block;background: url("../images/ico/ico_chk2.png") 0 0 no-repeat; background-size: cover; width: 22px; height: 22px;width: 22px;cursor:pointer; margin-right: 9px;}
.radiowrap .radio:checked + label {background: url("../images/ico/ico_check2.png") 0 0 no-repeat; background-size: cover;}
.radiowrap .radio + label + label { color: #9fa1a2; }
.radiowrap .radio:checked + label + label { color: #fff; }

 

---

 

적용된 화면