본문 바로가기

퍼블리싱/CSS/CSS3

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/