Move text on toggle switch On/Off

Question

I have a toggle switch. I want its size to be small.

I have tried this code, from another Stack Overflow post.

  .switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 17px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(55px);
  -ms-transform: translateX(55px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 25%;
  left: 25%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+ .slider .on
{display: block;}

input:checked + .slider .off
{display: none;}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;}
    } // community_table_main_section
  }
}

<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"><span class="on">ON</span><span class="off">OFF</span>

I want on text to be left side and off text to be right side. and by default the switch. When toggle button is on then small white round element is moving right side with so much space.

Any help would be great

Answer 1

I think you've picked up the above snippet from some other website, and hence, this is bad, cuz you are using it without understanding. Below is the altered working snippet of yours.

Explanation: I've added .on and .off selectors to your CSS with altered positioning, to set your ON and OFF text properly. Secondly, I have changed the transform from 55px to transform: translateX(28px);. Your default circle was getting out of the element because the transform size was more than your toggle switch size.

Would recommend you to understand the code(even if you copy it) before you plug it into your system so at some point if you run into issues like this, you know what's happening.

.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 17px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(28px);
  -ms-transform: translateX(28px);
  transform: translateX(28px);
}


/*------ ADDED CSS ---------*/

.on {
  display: none;
}

.on,
.off {
  color: white;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 25%;
  left: 25%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

.on {
  top: 8px;
}

.off {
  left: auto;
  right: -5px;
  top: 8px;
}

input:checked+ .slider .on {
  display: block;
}

input:checked + .slider .off {
  display: none;
}


/*--------- END --------*/


/* Rounded sliders */

.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}

<label class="switch">
  <input type="checkbox" id="togBtn">
  <div class="slider round">
    <span class="on">ON</span>
    <span class="off">OFF</span>
  </div>
</label>