1

Realicé un <input type="checkbox"/> pero quiero ponerle texto dentro y que cambie en base a la selección. ¿Cómo puedo realizar esto?

Éste es mi código HTML:

 <div class="swtich-container">
            <input type="checkbox" id="switch">
            <label for="switch" class="lbl"></label>
</div>

Éste es el CSS:

.lbl{      
        display: inline-block;
        width: 65px;
        height: 33px;
        background: #979797;
        border-radius: 100px;
        cursor: pointer;
        position: relative;
        transition: .2s;
    }  

    .lbl::after {
        content: '';
        display: block;
        width: 25px;
        height: 25px;
        background: #eee;
        border-radius: 100px;
        position: absolute;
        top: 4px;
        left: 4px;
        transition: .2s;
    }

    #switch:checked + .lbl::after {       
        left: 36px;
    }

    #switch:checked + .lbl {       
        background: #02889B;
    }

    #switch {
        display: none;
    }

Algo así y que cambie a off:

Botón tipo interruptor

1 respuesta 1

3

Tienes una buena estructura ya creada, solo te resta agregar las palabras ON y OFF.
Para lograrlo solo debes enmarcar todo tu checkbox en una etiqueta label luego tu div y por ultimo los span con el texto correspondiente.

<label class="swtich-container">
  <input type="checkbox" id="switch">
      <div class="slider">
      <span class="on">ON</span>
      <span class="off">OFF</span>
   </div>
</label>

Por supuesto hay otras formas de estructura este código pero lo veo conveniente de esta manera.
Inserte una clase para el div con el nombre slider y otra para los span con un nombre acorde a al texto insertos en ellos on y off.

A la clase slider la utilizaremos para ocultar uno de los textos, dependiendo de cual este seleccionado.
Apartir de los display tanto block como none.

A las clases on y off la utilizaremos para organizar los textos dentro de nuestro switch.

.swtich-container {
    position: relative;
    display: inline-block;
    width: 65px; /* Anoche del contenedor */
    height: 30px; /* Alto del contenedor */
    border-radius:20px;
    border:3px solid rgba(2, 137, 155, 0.050); /* Bordeado fuera del switch */
  }
  
  .swtich-container input {
    display: none;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #979797;
    -webkit-transition: .2s;
    transition: .2s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 24px; /* Alto de la bola */
    width: 24px; /* Ancho de la bola */
    left: 4px; /* Ubicacion Izquierda de la bola */
    bottom: 3.5px; /* Ubicacion Arriba-Abajo de la bola */
    background-color: white; /* Color de la bola */
    -webkit-transition: .2s; /* Velicidad de transición */
    transition: .2s; /* Velicidad de transición de Webkit*/
  }
  
  input:checked + .slider {
    background-color: #02889B;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(32px); /* Desplazamiento Webkit*/
    -ms-transform: translateX(32px); /* Desplazamiento */
    transform: translateX(32px); /* Desplazamiento */
  }
  
  
  /*------ Cambio ON y OFF ---------*/
  
  .on {
    display: none;
  }
  
  .on,
  .off {
    color: white; /* Color ON-OFF */
    position: absolute; /* Posicion */
    transform: translate(-50%, -50%);
    top: 25%;
    left: 25%;
    font-size: 11px; /* Tamaño de letra */
    font-family: Verdana, sans-serif; /* Fuente de letra */
  }
  
  .on {
    top: 14px; /* Ubicacion Arriba-Abajo de la palabra ON */
  }
  
  .off {
    left: auto;
    right: -3px; /* Ubicacion Derecha de la palabra OFF */
    top: 14px; /* Ubicacion Arriba-Abajo de la palabra OFF */
  }
  
  input:checked + .slider .on {
    display: block;
  }
  
  input:checked + .slider .off {
    display: none;
  }
  
  
  /* Slider */
  
  .slider {
    border-radius: 17px;
  }
  
  .slider:before {
    border-radius: 50%;
  }
<label class="swtich-container">
 <input type="checkbox" id="switch">
     <div class="slider">
     <span class="on">ON</span>
     <span class="off">OFF</span>
 </div>
</label>

Inserte algunos comentarios dentro del CSS para que te puedas ubicar si no entiendes algo.
Ten en cuenta que si tienes que modificar algo relacionado con el tamaño de uno de los componentes tendrás que hacer lo mismo con el resto objetos para conseguir una buena simetría en los componentes.


Por supuesto esto no deja de ser un input el cual lo puedes anclar con javascript.
Puedes agregar un atributo como onclick

<input type="checkbox" id="switch" onclick="validate()">

Podríamos plasmar un texto.

function validate() {
    if (document.getElementById('switch').checked) {
        text.innerHTML = "ON";
    } else {
        text.innerHTML = "OFF";
    }
}
.swtich-container {
    position: relative;
    display: inline-block;
    width: 65px; /* Anoche del contenedor */
    height: 30px; /* Alto del contenedor */
    border-radius:20px;
    border:3px solid rgba(2, 137, 155, 0.050); /* Bordeado fuera del switch */
  }
  
  .swtich-container input {
    display: none;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #979797;
    -webkit-transition: .2s;
    transition: .2s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 24px; /* Alto de la bola */
    width: 24px; /* Ancho de la bola */
    left: 4px; /* Ubicacion Izquierda de la bola */
    bottom: 3.5px; /* Ubicacion Arriba-Abajo de la bola */
    background-color: white; /* Color de la bola */
    -webkit-transition: .2s; /* Velicidad de transición */
    transition: .2s; /* Velicidad de transición de Webkit*/
  }
  
  input:checked + .slider {
    background-color: #02889B;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(32px); /* Desplazamiento Webkit*/
    -ms-transform: translateX(32px); /* Desplazamiento */
    transform: translateX(32px); /* Desplazamiento */
  }
  
  
  /*------ Cambio ON y OFF ---------*/
  
  .on {
    display: none;
  }
  
  .on,
  .off {
    color: white; /* Color ON-OFF */
    position: absolute; /* Posicion */
    transform: translate(-50%, -50%);
    top: 25%;
    left: 25%;
    font-size: 11px; /* Tamaño de letra */
    font-family: Verdana, sans-serif; /* Fuente de letra */
  }
  
  .on {
    top: 14px; /* Ubicacion Arriba-Abajo de la palabra ON */
  }
  
  .off {
    left: auto;
    right: -3px; /* Ubicacion Derecha de la palabra OFF */
    top: 14px; /* Ubicacion Arriba-Abajo de la palabra OFF */
  }
  
  input:checked + .slider .on {
    display: block;
  }
  
  input:checked + .slider .off {
    display: none;
  }
  
  
  /* Slider */
  
  .slider {
    border-radius: 17px;
  }
  
  .slider:before {
    border-radius: 50%;
  }
<body>
    <label class="swtich-container">
        <input type="checkbox" id="switch" onclick="validate()">
            <div class="slider">
            <span class="on">ON</span>
            <span class="off">OFF</span>
        </div>
    </label>
    <h1 id="text"></h1>
</body>

Actualización

Como te explicaba en la sección de comentarios (Véase aqui) creo haber cometido un error en el anidado de etiquetas, como lo comentan en este hilo de stackoverflow ingles.
Al parecer es posible pero no recomendable la supremacía de una label sobre un div.

Por ende y para obedecer los estandartes editare el codigo.
Veras que se simplifico mucho mas y que es muy parecido al publicado por ti con unos mínimos cambios.

.lbl{      
  display: inline-block;
  width: 65px;
  height: 33px;
  background: #979797;
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  transition: .2s;
  border-radius:20px;
  border:3px solid rgba(0, 0, 0, 0.178); /* Bordeado fuera del switch */
}  

.lbl::after {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  background: #eee;
  border-radius: 100px;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: .2s;
}

#switch:checked + .lbl::after {       
  left: 36px;
}

#switch:checked + .lbl {       
  background: #02889B;
  border-radius:20px;
  border:3px solid #B6D2EB; /* Bordeado fuera del switch */
}

#switch {
  display: none;
}

.on, .off {
    color: white; /* Color ON-OFF */
    position: absolute; /* Posicion */
    transform: translate(-50%, -50%);
    top: 25%;
    left: 25%;
    font-size: 11px; /* Tamaño de letra */
    font-family: Verdana, sans-serif; /* Fuente de letra */
  }

  .on {
    top: 15px; /* Ubicacion Arriba-Abajo de la palabra ON */
  }
  
  .off {
    left: auto;
    right: -3px; /* Ubicacion Derecha de la palabra OFF */
    top: 15px; /* Ubicacion Arriba-Abajo de la palabra OFF */
  }

#switch:checked + .lbl .on {
  display: block;
}

#switch:checked + .lbl .off {
  display: none;
}
<div class="swtich-container">
 <input type="checkbox" id="switch">
 <label for="switch" class="lbl">
     <span class="on">ON</span>
     <span class="off">OFF</span>
 </label>
</div>

La explicación anterior a la Actualización sigue siendo valida para los cambios echos en esta.

4
  • muchas gracias por tu ayuda y tu tiempo, muy buena explicación e información me funciono perfecto, pero me quedaron dos dudas la primera, por que si pegue el código tal cual como el tuyo mi toggle se ve un poco mas pequeño que el que se ve en tu ejemplo?? y al poner el código html dice que un div no puede ir anidado a un label eso no afecta? el 21 may. 2020 a las 16:47
  • 1
    Hola, @JasielTorres. El tamaño puede variar por diferentes motivos, uno de ellos puede ser que este enmarcado sobre otras etiquetas que lo obligan a acomodarse, esto es fácilmente solucionable cambiando algunos parámetros del CSS dependiendo lo que necesites. En cuanto al problema de "Anidado", creo que cometí un error como lo comentan en este hilo de stackoverflow. Las buenas noticias es que simplifica mucho mas el código. Actualizo la publicación, échale un vistazo.
    – Link_HG
    el 21 may. 2020 a las 21:25
  • ok ya me quedo mas claro gracias el 22 may. 2020 a las 15:55
  • Tengo una pregunta con respecto al primer código que se aportó como solución. ¿Por qué en la clase slider se deben definir las cuatro referencias de posicionamiento (top, bottom, right, left)? Por lo que sé, basta con una referencia de cada eje para posicionarlo (top, right por ejemplo). Sin embargo, si pongo solo dos, no aparece el slider. Parece ser que estos atributos de posicionamiento están influyendo en el tamaño del slider, haciéndolo cero si no se definen los cuatro. ¿Por qué? el 9 sep. 2021 a las 7:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.