CSS를 이용해서 checkbox 크기 조정하고 이미지처럼 꾸미기

모바일, 태블릿 프로젝트를 하다보니, 변수가 이만저만이 아니다.

안드로이드, IOS 디바이스마다 맞춰주는 것이 여간 피곤한게 아니다.

이럴때보면 오히려 크로스브라우징이 그나마 나은 거구나 하는 생각이 들 정도다.

모바일에서는 체크박스나 라디오버튼의 디폴트 사이즈가 작아 터치하는데 애로사항이 있다.

그냥 width="15px";height="15px" 이렇게 css에 박아주면? 일단 갤럭시 S3에선 통과!

그런데 문제는 먹는 디바이스가 있고, 안먹는 디바이스가 있는 것이다. 한마디로 일관되게 적용되지 않는 다는 것!

그래서 보통 선택 전 이미지와 선택 후 이미지로 대체해서 퍼블리싱을 하는 경우가 많다.

대표적인 예로 다음 모바일의 로그인 페이지이다.

Daum 이용약관 동의, 개인정보 수집 및 이용 동의 체크 부분을 background 속성을 이용해서 작성되어있다.

하지만 굳이 이미지로 박지않아도, CSS를 이용해서 체크박스의 스타일을 변경할 수 있다.

HTML

<input type="checkbox" id="divECI_ISDVSAVE" class="checkbox-style" /><label for="divECI_ISDVSAVE">담당자 정보를 계속 저장</label>
    

// 반드시 input의 id와 label의 for값을 맞춰 작성해야한다.

CSS

input[type=checkbox] {  
    display: none;  
}

input[type=checkbox] + label{
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;  
    margin-right: 15px;  
    font-size: 13px;
}

input[type=checkbox]+ label:before {     

    content: "";  
    display: inline-block;  
  
    width: 20px;  
    height: 20px;  
  
    margin-right: 10px;  
    position: absolute;  
    left: 0;  
    bottom: 1px;  
    background-color: #ccc;  
    border-radius: 2px; 
    box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}
input[type=checkbox]:checked + label:before { 

    content: "\2713";  /* 체크모양 */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 18px; 
    font-weight:800; 
    color: #fff;  
    background:#2f87c1;
    text-align: center;  
    line-height: 18px;  

} 

// css를 설명하자면, label 옆의 checkbox를 보이지않게 한 후, 가상요소 :before를 이용하여 체크박스자리에 원하는 모양으로 체크박스를 만들어주는 것이다.

그리고 역시 :checked를 이용하여, 체크됐을 때의 모양도 꾸며주면 끝!

참고사이트 http://www.hongkiat.com/blog/css3-checkbox-radio/