토클 스위치 만들기 toggle switch

작업중에 이쁜 토글 스위치 버튼이 있어서 소스를 정리해 봤다.

 

/*Toggle Switch*/

 

.switch   {display:inline-block; position:relative; width:49px; height:29px;}
.switch input {opacity:0; width:0; height:0} /*  input {display:none;}  */
.slider   {position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#d6d6d6; -webkit-transition:.4s; transition:.4s;}
.slider:before {position:absolute; content:""; height:25px; width:25px; left:2px; bottom:2px; background-color:white; -webkit-transition:.4s; transition:.4s;}
input:checked + .slider   {background-color:#ff813c;}
input:checked + .slider:before {-webkit-transform:translateX(20px); -ms-transform:translateX(20px); transform:translateX(20px);}

 

/* Rounded sliders */

.slider.round   {border-radius:34px;}
.slider.round:before {border-radius:50%;}

 

 

<label class="switch">
  <input type="checkbox" >
  <span class="slider round"></span>
</label>

 

위에서 input태그의 checkbox 의 checked 속성값을 부여하면 스위치를 on 한 상태로 화면을 볼수 있다.