input checkbox 스위치모양

<label class="switch">
     <input type="checkbox" checked>
     <span>아이디 저장</span>
</label>

.switch { cursor:pointer; color: #E8E8E8;  display: inline-flex;align-items: center; font-size: 18px;} 
.switch input[type="checkbox"] { position: relative; border: 0; border-radius: 1.25em; width: 48px; height: 24px; background-color: #6b768b; } 
.switch input[type="checkbox"]::before { content: ""; position: absolute; left: 4px;top:4px; width: 16px; height: 16px; border-radius: 50%;  background-color: #fff; transition: all 0.3s; } 
.switch input[type="checkbox"]:checked { background-color: #0075FF;  } 
.switch input[type="checkbox"]:checked::before {  left: 27px ; }