input 체크박스 CSS 변경하기

1.  체크박스 CSS 변경하기 

<input type="checkbox"/>는 브라우저마다 심플한 기본 디자인을 가지고 있다. 하지만 작업을 하다 보면 디자인 컨셉에 따라 체크박스를 변경해 주고 싶을 때가 있는데 이번에 input 체크박스 CSS 변경 방법을 기록하려 한다. 

 

 

2. HTML, CSS 소스 

[HTML]

<div class="check_wrap">
  <input type="checkbox" id="check_btn"/>
  <label for="check_btn"><span>선택!</span></label>
</div>

 

 

 

[CSS]

<style type="text/css">
/* input 숨겨준다 */
input#check_btn{
  display:none;
  }

input#check_btn + label{
  cursor:pointer;
 }

input#check_btn + label > span{
  vertical-align: middle;
  padding-left: 5px;
 }

/* label:before에 체크하기 전 상태 CSS */
input#check_btn + label:before{
  content:"";
  display:inline-block;
  width:17px;
  height:17px;
  border:2px solid #F47C7C;
  border-radius: 4px;
  vertical-align:middle;
  }
  
/* label:before에 체크 된 상태 CSS */  
input#check_btn:checked + label:before{
  content:"";
  background-color:#F47C7C;
  border-color:#F47C7C;
  background-image: url('check_btn.png');
  background-repeat: no-repeat;
  background-position: 50%;
  }
</style>

 

 

3. 결과  화면

input 체크박스 디자인