기능:토글스위치
- 토글 스위치 버튼 toggle switch
<div class="form_row"> <p>상태</p> <label class="toggle_switch"> <input type="checkbox"> <span><em><!-- 정상 / 블록 --></em></span> </label> </div>
.toggle_switch {position: relative; cursor: pointer; span {display: block; position: relative; padding-left: 60px; &:before {position: absolute; display: block; content: ''; position: absolute; top: 0; left: 0; width: 50px; height: 26px; border: 1px solid #0d6efd; border-radius: 13px;} &:after {display: block; content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #0d6efd; transition: transform 300ms;} em:before {content: '정상'; line-height: 26px;} } input[type=checkbox] {position: absolute; top: 0; left: 0; visibility: hidden; width: 1px; height: 1px; opacity: 0; &:checked + span { &:before {opacity: 0.5;} &:after {transform: translateX(24px); opacity: 0.5;} em:before {content: '블록';} } } }
Author And Source
이 문제에 관하여(기능:토글스위치), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dkahsem27/기능토글스위치저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)