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

<!-- partial:index.partial.html -->
<div class="switch"><br />
<label class="switch__wrapper"><input type="checkbox" /></label>
<div>&nbsp;</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번으로 선택된 채 보이게 할 수 있을까요?