switch 토글 + 글자 넣기

2022. 1. 14. 16:25카테고리 없음

https://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=293802

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch

https://www.htmllion.com/test.html?fileroot=css&filename=css3-toggle-switch-button 

 

switch-label:before {
      content: attr(data-off);
      right: 11px;
      color: #aaaaaa;
      text-shadow: 0 1px rgba(255, 255, 255, 0.5);
    }
    .switch-label:after {
      content: attr(data-on);
      left: 11px;
      color: #FFFFFF;
      text-shadow: 0 1px rgba(0, 0, 0, 0.2);
      opacity: 0;
    }


<label class="switch">
      <input class="switch-input" type="checkbox" />
      <span class="switch-label" data-on="On" data-off="Off"></span> <span class="switch-handle"></span> 

</label>