[CSS] input custom css

input 체크박스나 라디오 버튼을 그대로 가져다 쓰면

모양이 예쁘지 않아서 CSS를 통해 체크되는 모양을 바꿀 수 있는 

input custom css 입니다.

 

글씨를 클릭해도 (display:none 해놓은) input태그에 체크가 될 수 있도록

글씨를 label 태그 안에 넣어주고

클릭을 하면 글씨 앞에 있는 i태그가 체크되는 박스 모양입니다.

<span class="check_wrap">
  <input type="checkbox" class="chkBasic" id="chk1" name="check">
  <label for="chk1" class="chkBasic"><i></i>큰 체크박스</label>&nbsp;&nbsp;
</span>
<span class="check_wrap">
  <input type="checkbox" class="chkBasic" id="chk2" name="check">
  <label for="chk2" class="chkBasic"><i></i>큰 체크박스</label>&nbsp;&nbsp;
</span>

<span class="radio_wrap">
  <input type="radio" class="radioBasic" id="rdo1" name="test">
  <label for="rdo1" class="radioBasic"><i></i>큰 라디오버튼</label>&nbsp;&nbsp;
</span>
<span class="radio_wrap">
  <input type="radio" class="radioBasic" id="rdo2" name="test">
  <label for="rdo2" class="radioBasic"><i></i>큰 라디오버튼</label>&nbsp;&nbsp;
</span>

/*스크립트 사용하지 않은 체크박스 커스텀 css*/
input.chkBasic[type="checkbox"] {display:none; vertical-align:middle; }
input.chkBasic[type="checkbox"] + label.chkBasic {vertical-align:middle; font-size:15px; line-height:25px; cursor:pointer;}
input.chkBasic[type="checkbox"] + label.chkBasic > i {display:inline-block; width:25px; height:25px; border:1px solid #dfdfdf; cursor:pointer; vertical-align:middle; margin:3px 10px 5px 0; }
input.chkBasic[type="checkbox"]:checked + label.chkBasic > i {  background-color:pink; }

/* ie8 핵 */ @media \0screen {	
input.chkBasic[type="checkbox"] {display:inline-block; width:25px; height:25px; vertical-align:-10px;}
input.chkBasic[type="checkbox"] + label.chkBasic > i {display:none !important;}
}

/* 스크립트 사용하지 않은 라디오버튼 커스텀 css*/
input.radioBasic[type="radio"] {display:none; vertical-align:middle;}
input.radioBasic[type="radio"] + label.radioBasic {vertical-align:middle; font-size:15px; line-height:25px; letter-spacing:-1px;  font-family:noto-R; cursor:pointer;}
input.radioBasic[type="radio"]:checked + label.radioBasic {color:#000;  font-family:noto-M;}
input.radioBasic[type="radio"] + label.radioBasic > i {display:inline-block; width:25px; height:25px; border:1px solid #dfdfdf; border-radius:50%;  cursor:pointer; vertical-align:middle; margin:3px 7px 5px 0;}
input.radioBasic[type="radio"]:checked + label.radioBasic > i { background-color:pink; }
input.radioBasic[type="radio"] + label.radioBasic > i.rgt { margin:3px 0px 5px 7px; }

/* ie8 핵 */ @media \0screen {		
input.radioBasic[type="radio"] {display:inline-block; width:25px; height:25px; vertical-align:-10px;}
input.radioBasic[type="radio"] + label.radioBasic > i {display:none !important;}
input.radioSmall[type="radio"] {display:inline-block; width:18px; height:18px; vertical-align:-6px;}
input.radioSmall[type="radio"] + label.radioSmall > i {display:none !important;}	
}

 

input.chkBasic[type="checkbox"] + label.chkBasic > i  이부분에

배경색 대신 체크되는 모양의 이미지 url을 넣어주면 됩니다.

 

- input의 id 값과 label의 for값을 같아야 하고

- 라디오 버튼의 경우 둘중 하나만 선택이 되어야 하기때문에

   여러개의 라디오 input버튼들의 name=""값을 같아야합니다.

- input 태그 끝에 checked는 체크된 상태가 디폴드 값이고

                       disabled은 비활성화된 상태입니다.

  checked disabled 두 속성이 같이 올수도 있습니다. (체크된 채 비활성화)

 

 

 

 

 

↓↓↓ 아래는 스크립트를 이용한 input custom 하는 방법입니다.

<script>
$(document).ready(function(){
	/** radio checkbox **/
	rdobox_custom('.rdobox');
	chkbox_custom('.chkbox');
});
</script>

<section class="uikit">
  <div class="title">radio button</div>
  <span class="rdobox"><input type="radio" name="rad01" id="rad01_1" ><label for="rad01_1">미선택</label></span>
  <span class="rdobox"><input type="radio" name="rad01" id="rad01_2" name="rad01" checked><label for="rad01_2">선택</label></span>
  <span class="rdobox"><input type="radio" name="rad01" id="rad01_3" disabled><label for="rad01_3">비활성</label></span>
  <span class="rdobox"><input type="radio" name="rad02" id="rad02_2" checked disabled><label for="rad02_2">비활성</label></span>
</section>

<section class="uikit">
  <div class="title">checkbox</div>
  <span class="chkbox"><input type="checkbox" name="" id="chk01_1" ><label for="chk01_1">미선택</label></span>
  <span class="chkbox"><input type="checkbox" name="" id="chk01_2" checked><label for="chk01_2">선택</label></span>
  <span class="chkbox"><input type="checkbox" name="" id="chk01_3" disabled><label for="chk01_3">비활성</label></span>
  <span class="chkbox"><input type="checkbox" name="" id="chk02_2" checked disabled><label for="chk02_2">비활성</label></span>

  <br><br><br>
  <span class="rdobox"><input type="radio" name="rad03" id="rad00"></span>
  <br><br><br>
  <span class="chkbox"><input type="checkbox" name="" id="chk00"></span>
</section> 

.rdobox, .chkbox {display:inline-block; position:relative; overflow:hidden; vertical-align:middle}
.rdobox input, .chkbox input {position:absolute; left:0; top:0; opacity:0; z-index:1;}
.rdobox label, .chkbox label {display:block; position:relative; padding-left:30px;}
.rdobox:before {content:""; display:block; position:absolute; top:50%; left:0; width:20px; height:20px; margin-top:-10px; border:1px solid #ccc; border-radius:100%; box-sizing:border-box}
.rdobox:after {content:""; display:none; position:absolute; top:50%; left:5px; width:10px; height:10px; margin-top:-5px; border-radius:100%; box-sizing:border-box; background-color:#7a828d}
    
.chkbox:before {content:""; display:block; position:absolute; top:50%; left:0; width:20px; height:20px; margin-top:-10px; border:1px solid #ccc; box-sizing:border-box}
.chkbox:after {content:""; display:none; position:absolute; top:8px; left:4px; width:13px; height:14px; margin-top:-4px; box-sizing:border-box;background:url('http://www.precede.co.kr/sample/resources//images/template/bg_chk.png') no-repeat;}
    
.rdobox.on:before , .chkbox.on:before {border-color:#3775ff}
.rdobox.on:after {display:block; background-color:#3775ff}
    
.chkbox.on:after {display:block;}
.rdobox.non:before , .chkbox.non:before {background-color:#f7f7f7; border-color:#ccc}
.rdobox.non:after {background-color:#ccc}
.chkbox.non:after {background-image:url('http://www.precede.co.kr/sample/resources//images/template/bg_chk_disa.png');}
.focuson {outline:1px dotted}
    
@media screen and (-webkit-min-device-pixel-ratio:0){.focuson {outline:-webkit-focus-ring-color auto 5px}} /* chrome 오페라 사파리*/
.rdobox + .rdobox {margin-left:19px}
.chkbox + .chkbox {margin-left:19px}