[CSS] CSS appearance 체크박스, 라디오 모양 변경 방법

appearance

 : 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현할 때 사용합니다. 네이티브로 지원되는 모양을 해제하거나 추가할 때 사용합니다.

appearance: none; /* 원래 쓰이는 속성을 없앱니다. */

 

기본으로 나오는 모양을 없애고 사이즈를 조정해서 화면에 표시시켜준다.

체크박스를 1px로 없애버리고 이미지를 사용해서 체크박스 사용

 

 

1. 체크박스를 사라지게 만들기

 

input[type=checkbox].css-checkbox {
    overflow: hidden; 
    position: absolute; 
    left: -1000px; 
    width: 1px; 
    height: 1px;
}

 

 

2. 라벨 태그에 이미지 넣기

 

input[type=checkbox].css-checkbox + label {
    display: inline-block; 
    height: 20px; 
    padding-left: 30px !important; 
    line-height: 20px !important; 
    background: url(../images/bg_checkbox.png) no-repeat 0 0; 
    background-size: 20px; 
    cursor: pointer; 
    vertical-align: middle; 
    font-size: 15px;
}

 

3. 체크되었을때 이미지 위치를 옮겨서 체크 모양으로 바꿔주기

 

input[type=checkbox].css-checkbox:checked + label { background-position: 0 -20px; }