참고 : http://ichbintaeeun.tistory.com/16
CSS를 이용해서 checkbox 크기 조정하고 이미지처럼 꾸미기
Posted 2014.09.25 11:00모바일, 태블릿 프로젝트를 하다보니, 변수가 이만저만이 아니다.
안드로이드, 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/
========================================================================================================
자바스크립트를 사용하지 않고 CSS로만 적용한 Checkbox, Radio Buttons
IE는 기존 체크박스, 라디오 버튼처럼 보이고 FF, Chrome 등에서 사용가능
출처 : http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/
radio_checkbox_css.zip
| <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <div id="show"> <h1>Easy CSS3 Checkboxes and Radio Buttons</h1> <input type="checkbox" id="c1" name="cc" /> <label for="c1"><span></span>Check Box 1</label> <p> <input type="checkbox" id="c2" name="cc" /> <label for="c2"><span></span>Check Box 2</label> <p><br/> <input type="radio" id="r1" name="rr" /> <label for="r1"><span></span>Radio Button 1</label> <p> <input type="radio" id="r2" name="rr" /> <label for="r2"><span></span>Radio Button 2</label> </div> </body> </html> |
