[CSS] CSS를 이용한 checkbox, radio 꾸미기 (스크립트 안씀!) IE9+

일반적으로 form 요소의 customize를 추천하지도 않고 사용하고 싶지도 않습니다.

이유는 브라우저별 모양이 너무 재각기이고 이러한 폼요소는 기본적으로 최소한의 꾸밈으로 사용하는 것이 디바이스별

사용성에도 좋은듯 합니다.

대부분 background 이미지를 이용하여 스크립트로 클래스 제어를 통해 form요소를 customize 하는 것으로 알고 있습니다.

지금 알려드릴 방법은 css를 이용한 방법이며 스크립트를 사용하지 않습니다. 그리고 브라우저는 IE를 기준으로 IE9 이상 잘 나오고 있습니다.

만약 더 하위버전을 맞추고 싶다면 그때 background 이미지를 이용하여 스크립트를 사용하는 방법말고는 생각이 나질 않네요.

제가 만든 소스를 보고 한번 그대로 가져다 확인해 보세요 정말 괜찮은 방법이라 생각합니다.

참고로 웹접근성에도 무리가 없습니다.

HTML

<div class="put_custom_wrap">
    <input type="checkbox" id="ckBox">
    <label for="ckBox">동의합니다.</label>
</div>

CSS

/* 
 * author : Kang chang min
 * 
 * email : kcmschool73@gmail.com
 * 
 * Blog : http://kcmschool.tistory.com/
 * 
 * hopage : http://kcmschool.xyz/
 * 

 ** IE9 +
 ** ::-ms-check (IE10+) 는 IE에서 꾸밀수 없는 input checkbox를 꾸며준다.
 ** :before (IE8+, css2) IE8은 일부 지원한다고 하는데 화면에서 확인. (IE8화면적용 안됨.)
 ** :checked (IE9+, css3)
----------------------------- */
.put_custom_wrap{
    position:relative;
    margin:20px;
}
.put_custom_wrap input[type=checkbox]::-ms-check{
    border:solid 1px #fff;
}
.put_custom_wrap input[type=checkbox]{
    -webkit-appearance: none;
    position:absolute;
    top:2px;
    left:-1px;
    width:22px;
    height:22px;
    vertical-align:middle;
}
.put_custom_wrap input[type=checkbox] + label{
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px;
}
.put_custom_wrap input[type=checkbox] + label:before{
    content:"";
    display:inline-block;
    width:20px;
    height:20px;
    margin-right:10px;
    position:absolute;
    top:0;
    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);
}
.put_custom_wrap 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:green;
    text-align:center;
    line-height:18px;
}

위 소스를 브라우저로 실행하면 아래같은 화면이 나옵니다.

잘 작동 되는군요 ㅎ

실질적인 완벽한 지원은 IE10 입니다. 

::-ms-check 선택자가 IE10이상에서 지원하기 떄문이죠.

위의 선택자는 IE10 이상에서 input의 checkbox요소를 꾸밀 수 있습니다.

tab으로의 접근성에서 blur효과를 보여주기위해 크기를 늘리면서 지원하지않는 IE9 이하버전 부터는 checkbox의 테두리 선이 보입니다.

하지만 디자인측면에서 크게 영향을 미친다는 생각을 하지 않기 떄문에 IE9 까지 사용가능하다 설명드렷다는 점 참고해 주세요 ^^

여러분에게 큰도움 많이 배우셧다면 공감 부탁드리고 많은 질의 기다리고 있겠습니다.~