[html/css] input checkbox 커스텀 이미지 사용하기

이번 포스팅에서는 input checkbox를 커스텀해보려고 한다.

 

다음은 기본 input checkbox이다.

<input type="checkbox">

 

이 기본 input checkbox를 다음과 같이 변경해보자.

먼저 checkbox 이미지를 on, off 두 개를 준비한다. 이미지 뒤에 on, off를 붙여서 따로 저장하자.

 

1. input 태그 옆에 비어있는 label을 붙인다.

<input type="checkbox" id="check"><label for="check"></label>

 

label의 for 속성에 input 태그의 아이디를 입력하면 label을 눌렀을 때에도 해당 아이디를 가진 input 태그를 누른 것과 같은 효과를 가진다.

 

label에 아무것도 넣지 않은 이유는 이 label에 이미지를 입힐 것이기 때문이다.

 

2. input 태그의 display를 none으로 변경한다.

    #check{
        display: none;
    }

 

기본 체크박스를 사용하지 않을 것이기 때문에 보이지 않게 display: none 값을 준다,.

 

3. label에 width, height를 준다.

    label{
        display: block;
        width:30px;
        height:30px;
    }

 

label에 아무것도 넣지 않았기 때문에 그대로 실행하면 아무것도 보이지 않는다.

 

display와 height, width 속성을 준다.

 

4. input checkbox가 체크되었을 때와 그렇지 않을 때에 배경 이미지를 다르게 준다.

    /* off */
    #check+label{ 
        background-repeat: no-repeat; /* 반복 방지 */
        background-image: url('./images/checkbox_off.png'); /*off 이미지*/
    }
    /* on */
    #check:checked+label{
        background-repeat: no-repeat; /* 반복 방지 */
        background-image: url('./images/checkbox_on.png'); /*on 이미지*/
    }

 

배경 이미지 반복을 막기 위해 background-repeat: no-repeat을 주고 background-image에 다운받았던 이미지의 경로를 입력한다.

 

잘 동작하는지 확인하자.

<전체 html 코드>

    <input type="checkbox" id="check"><label for="check"></label>

<전체 css 코드>

    /* 기본 체크박스 감춤 */
    #check{
        display: none;
    }
    /* off */
    #check+label{ 
        background-repeat: no-repeat; /* 반복 방지 */
        background-image: url('./images/checkbox_off.png'); /*off 이미지*/
    }
    /* on */
    #check:checked+label{
        background-repeat: no-repeat; /* 반복 방지 */
        background-image: url('./images/checkbox_on.png'); /*on 이미지*/
    }
    label{
        display: block;
        width:30px;
        height:30px;
    }