Adjust word inside the toggle

Question

Colleagues,

I don’t know if my title was clear, but here on the site I got a toggle, but I need to put the word Yes and Not within it. The word Yes I managed to put, but it was almost out of the toggle and the word Not I’m not getting it. I don’t know if I was clear in my doubt, so I’ll put the photo and the code.

The code goes below:

CSS

.onoff input.toggle {
    display: none;
}

.onoff input.toggle + label {
    content: "Não";
    display: inline-block;
    position: relative;
    box-shadow: inset 0 0 0px 1px #d5d5d5;
    height: 30px;
    width: 70px;
    background: #DC143C;
    border-radius: 30px;    
}

.onoff input.toggle + label:before {
    content: "";
    display: block;
    height: 30px;
    border-radius: 30px;
    background: rgba(19, 191, 17, 0);
    transition: 0.1s ease-in-out;
}

.onoff input.toggle + label:after {
    content: "";
    position: absolute;
    height: 30px;
    width: 30px;
    top: 0;
    left: 0px;
    border-radius: 30px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: 0.1s ease-in-out;
}

.onoff input.toggle:checked + label:before {
    width: 70px;
    content: 'Sim';
    color: #FFF;
    font-family: 'Arial';
    background: #13bf11;
}

.onoff input.toggle:checked + label:after {
    left: 40px;    
    box-shadow: inset 0 0 0 1px #13bf11, 0 2px 4px rgba(0, 0, 0, 0.2);
}

HTML

<div class="col-lg-12"> 
    <div class="form-group">
        <div class="onoff">                 
            <input type="checkbox" class="toggle" id="onoff1">
            <label for="onoff1"></label>                        
        </div>                  
        <!--<span id="estado"></span> -->
        <input type="hidden" name="Ativo" id="campo" value="Não">                   
    </div>
</div>

Jquery

//<![CDATA[
window.onload=function(){

var onoff = document.getElementById('onoff1');
var estado = document.getElementById('estado');

onoff.addEventListener('change', function() {

    //estado.innerHTML = this.checked ? 'Sim' : 'Não';
    estado = this.checked ? 'Sim' : 'Não';
    // alert(estado);
    // var campo = document.getElementById("campo").value = estado.innerHTML;
    var campo = document.getElementById("campo").value = estado;
     //onoff.value = estado.innerHTML;
     //alert(onoff);

     if(campo === 'Sim'){
         var campoImagem = document.getElementById("campoImagem");
         $(campoImagem).css("display", "block");
     }else{
         var campoImagem = document.getElementById("campoImagem");
         $(campoImagem).css("display", "none");
     }

    $.ajax({
       // url: "index.html?status="+estado.innerHTML,
       data: {        
           estado: this.checked,
           campo: campo
       }
   }).done(function(msg) {     
   //if (msg == 'failed') return el.checked = !el.checked; // caso o servidor retorne "failed" mudar o estado do botão
    //   else ("Info gravada: " + msg);
   });
});
}//]]>

Answer 1

Try the following modifications to your CSS and this addition to your JS:

CSS:

/* Modificação */
.onoff.ligado input.toggle:checked + label:before {
    width: 70px;
    content: '\00a0 Sim';
    color: #FFF;
    font-family: 'Arial';
    background: #13bf11;
    line-height: 1.8rem;
    text-align: left;
}

.onoff input.toggle + label:before {
    width: 70px;
    content: 'Não \00a0';
    color: #FFF;
    font-family: 'Arial';
    background: #DC143C;  
    line-height: 1.8rem;
    text-align: right;  
}

JS

//MODIFICAÇÕES

document.getElementById ('onoff1').addEventListener ('click', function (ev) {
    ev.target.parentNode.classList[ ev.target.checked ? 'add' : 'remove'] ('ligado');
  }, false);

Answer 2

Alternatively, without using javascript to control behavior:

HTML:

<label class="toggle">
  <input type="checkbox" id="onoff2">
  <div></div>
</label>

CSS:

/* .toggle é o "container" de tudo */
.toggle {
    position: relative;
    display:  inline-block;
    width:    70px;
    height:   30px;
}

/* oculta quaisquer "input"s dentro do .toggle */
.toggle input {
    display: none;
}

/* o div é o campo, vermelho ou verde, no qual o botão corre */
.toggle > div {
    position:         absolute;
    cursor:           pointer;
    width:            70px;
    height:           30px;
    border-radius:    15px;
    background-color: #DC143C;
    box-shadow:       inset 0 0 0px 1px #d5d5d5;
    transition: 0.1s ease-in-out;
}
.toggle > input:checked + div {
    background-color: #13BF11;
}

/* o div::before é o botão branco */
.toggle > div::before {
    content:          '';
    display:          block;
    background-color: #FFF;
    width:            30px;
    height:           30px;
    border-radius:    15px;
    box-shadow:       inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
    transition:       0.1s ease-in-out;
}

.toggle > input:checked + div::before {
    transform:        translateX(40px);
}

/* o div::after vai conter o rótulo propriamente dito */
.toggle > div::after {
    content:     'Não';
    line-height: 20px;
    padding:     5px;
    margin-top:  -30px;
    float:       right;
    color:       #FFF;
    transition:  0.1s ease-in-out;
}

.toggle > input:checked + div::after {
    content:     'Sim';
    float:       left;
    transition:  0.1s ease-in-out;
}

The cat jump is the margin-top: -30px;, since div::after will end up "on the bottom line", then stay clipped and invisible.