Html＆JQuery Checkbox Toggle
페이지 정보
작성자 디자인천일
작성일Date: 2025-03-28 22:23
조회view: 9
본문
체크박스 토글 디자인
css
label.switchify.switchify-label {display:inline-block;}
label.switchify.switchify-label > input.switchified {display:none;}
label.switchify.switchify-label > span.switchify-switch {display:block;position: relative;width:36px;height:22px;background:#ddd;border:solid 2px #ddd;border-radius:30px;transition: background-color 0.25s, border-color 0.25s;}
label.switchify.switchify-label > span.switchify-switch::after {content:'';display:block;position:absolute;left:0;width:18px;height:18px;background:#fff;border-radius:30px;transition: left 0.25s;}
label.switchify.switchify-label > input.switchified:checked + span.switchify-switch {background:var(--color);border:solid 2px var(--color);}
label.switchify.switchify-label > input.switchified:checked + span.switchify-switch::after {left:calc(100% - 18px);}html
<input type="checkbox" name="opt" id="opt" class="chk_toggle" checked>jQuery/Javascript
$('input[type=checkbox]').switchify();