비밀글 체크박스를 토글 버튼으로 바꾸고싶어요.. 채택완료

</p>

<p><style></p>

<p> </p>

<p>.onoffswitch {</p>

<p>    position: <i>relative</i>; width: <i>66px</i>;</p>

<p>    -webkit-user-select:<i>none</i>; -moz-user-select:<i>none</i>; -ms-user-select: <i>none</i>;</p>

<p>}</p>

<p>.onoffswitch-checkbox {</p>

<p>    position: <i>absolute</i>;</p>

<p>    opacity: <i>0</i>;</p>

<p>    pointer-events: <i>none</i>;</p>

<p>}</p>

<p>.onoffswitch-label {</p>

<p>    display: <i>block</i>; overflow: <i>hidden</i>; cursor: <i>pointer</i>;</p>

<p>    border: <i>2px solid #999999</i>; border-radius: <i>20px</i>;</p>

<p>}</p>

<p>.onoffswitch-inner {</p>

<p>    display: <i>block</i>; width: <i>200%</i>; margin-left: <i>-100%</i>;</p>

<p>    transition: <i>margin 0.3s ease-in 0s</i>;</p>

<p>}</p>

<p>.onoffswitch-inner:before, .onoffswitch-inner:after {</p>

<p>    display: <i>block</i>; float: <i>left</i>; width: <i>50%</i>; height: <i>20px</i>; padding: <i>0</i>; line-height: <i>20px</i>;</p>

<p>    font-size: <i>14px</i>; color: <i>white</i>; font-family: <i>Trebuchet, Arial, sans-serif</i>; font-weight: <i>bold</i>;</p>

<p>    box-sizing: <i>border-box</i>;</p>

<p>}</p>

<p>.onoffswitch-inner:before {</p>

<p>    content: <i>"ON"</i>;</p>

<p>    padding-left: <i>10px</i>;</p>

<p>    background-color: <i>#34A7C1</i>; color: <i>#FFFFFF</i>;</p>

<p>}</p>

<p>.onoffswitch-inner:after {</p>

<p>    content: <i>"OFF"</i>;</p>

<p>    padding-right: <i>10px</i>;</p>

<p>    background-color: <i>#EEEEEE</i>; color: <i>#999999</i>;</p>

<p>    text-align: <i>right</i>;</p>

<p>}</p>

<p>.onoffswitch-switch {</p>

<p>    display: <i>block</i>; width: <i>18px</i>; margin: <i>1px</i>;</p>

<p>    background: <i>#FFFFFF</i>;</p>

<p>    position: <i>absolute</i>; top: <i>0</i>; bottom: <i>0</i>;</p>

<p>    right: <i>42px</i>;</p>

<p>    border: <i>2px solid #999999</i>; border-radius: <i>20px</i>;</p>

<p>    transition: <i>all 0.3s ease-in 0s</i>; </p>

<p>}</p>

<p>.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {</p>

<p>    margin-left: <i>0</i>;</p>

<p>}</p>

<p>.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {</p>

<p>    right: <i>0px</i>; </p>

<p>}</p>

<p></style></p>

<p><script></p>

<p><<b>div</b> class=<i>"onoffswitch"</i>></p>

<p>    <<b>input</b> type=<i>"checkbox"</i> name=<i>"onoffswitch"</i> class=<i>"onoffswitch-checkbox"</i> id=<i>"myonoffswitch"</i> tabindex=<i>"0"</i> checked></p>

<p>    <<b>label</b> class=<i>"onoffswitch-label"</i> for=<i>"myonoffswitch"</i>></p>

<p>        <<b>span</b> class=<i>"onoffswitch-inner"</i>></<b>span</b>></p>

<p>        <<b>span</b> class=<i>"onoffswitch-switch"</i>></<b>span</b>></p>

<p>    </<b>label</b>></p>

<p></<b>div</b>></p>

<p></script></p>

<p>