체크박스(checkbox) 커스터마이징해서 사용해보기

/*
 * 웹 페이지 전체 체크박스를 커스터마이징 - CSS
 */

// 기본 체크박스를 안보이게 처리
input[type="checkbox"] {
    display:none;
}

// 커스터마이징 기본(unchecked인 경우)
input[type="checkbox"] + label {
    cursor: pointer; // 기본체크박스는 없으므로 추가해줌
    padding-left: 23px; // 패딩값은 21~23px가 적당
    background-repeat: no-repeat;
    background-image: url('../images/sap_chk0.png'); // 체크박스 이미지는 라벨 태그의 배경 이미지로 표시
}

// checked인 경우
input[type="checkbox"]:checked + label {
    background-image: url('../images/sap_chk1.png');
}

// 사용불가인 경우
input[type="checkbox"]:disabled + label {
    background-image: url('../images/sap_chk2.png');
}

// 체크+사용불가인 경우
input[type="checkbox"]:checked:disabled + label {
    background-image: url('../images/sap_chk3.svg');
}

/*
 * 웹 페이지 전체 체크박스를 커스터마이징 - html
 */
 <input type="checkbox" name="simul-save" id="simul-save"><label for="simul-save">시뮬레이션 저장</label>
 // label for로 사용을 해야 정상적으로 보여진다.

전체 라벨 너비에서 padding 영역에 라벨 배경이미지가 삽입되는 구조