switch box with css

HTML

<div class="switchbox">
    <input type="checkbox" id="switch" name="switch"  />
    <label for="switch" data-on="ON" data-off="OFF">
        <span class="on">Light</span>
        <span class="off">Dark</span>
    </label>
</div>

CSS

* { font-family: sans-serif; }

.switchbox label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  width: 70px;
  height: 20px;
  border: 1px solid #c1c1c1;
  border-radius: 3px;
}
.switchbox label span.on,
.switchbox label span.off {
  position: absolute;
  top: 0;
  width: 50%;
  line-height: 1.4;
  font-size: 12px;
  font-weight: 600;
  height: 16px;
  padding: 2px 0;
  text-align: center;
}
.switchbox span.on {  
   color: black;
  right: inherit;
  left: 0;
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px; 
}
.switchbox span.off {  
  right:0;
  color: black;

  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
}
.switchbox input {
  display: none;
}
.switchbox input:checked + label:before {
  
  color: black;
}
.switchbox input:checked + label:after {
  
  color: #737373;
}

label{
    position:relative;    
}

.switchbox input[value=on] + label:before {
    transition:0.3s;
    content:""; display:block;
    width:50%;
    height:20px;
    position:absolute;
    left:0;
    top:0;
  background: #a5a5a5; /* W3C */    
}

.switchbox input:checked + label:before {
    left:50%; 
}