[CSS3]input radio 토글버튼 만들기

input radio의 label을 이용해 토글버튼을 만들어줍니다. 

 

<form action="">
   <input type="radio" name="radioAni1" id="radioAni11">
   <input type="radio" name="radioAni1" id="radioAni12">
   <div class="label">
      <label class="label1" for="radioAni11"><span></span></label>
      <label class="label2" for="radioAni12"><span></span></label>
   </div>
</form>

 

input radio는 같은 name을 갖는것끼리 묶음이 됩니다. (같은 묶음 중 1개만 선택 가능합니다.)

input과  label은 id와 for의 값으로 묶입니다. (이렇게 묶이면 label 을 클릭해도 input radio가 선택됩니다.)

 

 

 

 

 

 

 

 

스크립트를 쓰지 않는 더 쉬운방법!

[CSS/CSS 응용] - input[type='checkbox'] 로 toggle 버튼 switch 버튼 만들기