스위치 모양 input 원하는 버튼 먼저 선택되어 보이게

스위치 모양 input 원하는 버튼 먼저 선택되어 보이게

QA

스위치 모양 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번으로 선택된 채 보이게 할 수 있을까요?

1794277141_1675319444.9197.png

 


이 질문에 댓글 쓰기 :

답변 1

<input type="checkbox" checked />

 

답변을 작성하시기 전에 로그인 해주세요.
전체 177
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT