input checkbox 커스텀

<input type="checkbox"> 의 기본 스타일을 보면 못생겼다!

이러한 input 박스를 스타일링 하기에는 어렵기 때문에 input요소를 숨기고 label 요소를 연결해서 스타일링을 새롭게 할 수 있다!

<input id="check" class="check" type="checkbox">
<label for="check">로그인 상태 유지</label>

.check {
    display: none;
}

label::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    background-image: url('images/check-box.png');
    float: left;
    margin-right: 8px;
}

.check:checked + label::before {
    background-image: url('images/checked-box.png');
}

기본속성인 input을 없애주고 label의 가상요소에 background를 이용해 새로운 박스가 만들어졌다! 또한 check 되었을 때 새로운 background image를 주어서 체크가 되었을 때 새로운 이미지를 넣어줄 수 있다!