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.