CSS/CSS 응용
[CSS3]input radio 토글버튼 만들기
알찬 퍼블리셔
2019. 4. 11. 11:33
728x90
반응형
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 버튼 만들기
728x90
반응형