스위치 모양 input 원하는 버튼 먼저 선택되어 보이게
본문
<!-- partial:index.partial.html -->
<div class="switch"><br />
<label class="switch__wrapper"><input type="checkbox" /></label>
<div> </div>
<label class="switch__wrapper"> </label></div>
<!-- partial -->
<style type="text/css">/******************************* 로고 옆 토글모양 버튼 *********************/
.switch {position: absolute; top: 30px; left: 259px;}
.switch__wrapper { position: relative; display: inline-block; width: 200px; height: 56px; line-height: 27px; background: #ededed; border: 1px solid #dddddd; box-sizing: border-box; border-radius: 28px; margin: 0px 1em 0px 0px;}
.switch__wrapper input { display: none;}
.switch__wrapper input:checked + .switch__slider:before { transform: translateX(92px); background-color: #ff9800;}
.switch__wrapper input:checked ~ div:after { color: #ffffff; transition: color 0.3s ease 0s;}
.switch__wrapper input:checked ~ div:before { color: #919191; transition: color 0.3s ease 0s;}
.switch div::before { content: "1번버튼"; position: relative; z-index: 5; font-weight: 700; font-size: 15px; color: #ffffff; bottom: -14px; left: 23px; cursor: pointer; transition: color 0.3s ease 0s;}
.switch div::after { content: "2번버튼"; position: relative; z-index: 5; font-weight: 700; font-size: 15px; color: #919191; bottom: -14px; left: 64px; cursor: pointer; transition: color 0.3s ease 0s;}
.switch__slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; transition: 0.4s; border-radius: 34px;}
.switch__slider::before { position: absolute; content: ""; width: 108px; height: 56px; left: -1px; bottom: -1px; background-color: #2A3CF3; transition: all 0.4s ease 0s; border-radius: 28px;}
</style>
디자인은 완벽하게 한것 같은데 셀렉된 버튼이 무조건 1번으로 보이는데
첫 화면에서도 2번으로 선택된 채 보이게 할 수 있을까요?
