Problemas con css3, checkbox estilo iphone
Buenos dias expertillos.
Estoy intentando recrear un tipo de checkbox estilo iphone:
Código HTML:
<div class="cb">
<input type="checkbox" id="cb" />
<label for="cb"></label>
</div>
Código CSS:
.cb input[type="checkbox"] {
visibility: hidden;
}
.cb {
width: 80px;
height: 26px;
margin: 20px auto;
background-color: #cf0000;
border-radius: 50px;
position: relative;
box-shadow: 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
.cb:after {
content: 'NO';
color: #fff;
position: absolute;
top: 5px;
right: 10px;
z-index: 0;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255,255,255,0.15);
}
.cb:before {
content: 'SI';
color: #fff;
position: absolute;
top: 5px;
left: 10px;
z-index: 0;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255,255,255,0.15);
}
.cb label {
background-color: #bbb;
display: block;
width: 34px;
height: 20px;
border-radius: 50px;
transition: all 0.4s ease;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
}
.cb input[type="checkbox"]:checked + label {
left: 43px;
}
Hasta aquí todo perfectamente, la bolita se desliza. Ahora bien, lo que yo quiero conseguir también es que el fondo cambie del color rojo (#cf0000) al verde (#138800) y no lo consigo.
¿Alguna solución?
Gracias.
1 Respuesta
Hace 2 o 3 meses estuve aprendiendo css con tutes online...
y... Después de dar muchas vueltas a tu código.. y probarlo en la pc, el problema que tienes es que quieres cambiar el color del padre (contenedor del checkbox)
Y NO HAY ninguna forma de hacer eso con puro css
Con css puedes hacer referencia a hijos, descendientes y hermanos
Entonces lo que tienes que hacer.. es
1ro. Un contenedor para todo
2nd dentro de este.. poner 3 elementos...
- checkbox
- label
- Y lo que visualmente seria el fondo
<div>
<input type="checkbox" id="boton" />
<label for="boton"></label>
<div id="fondo"></div>
</div>
Y con esa estructura podrías
input[type="checkbox"]:checked ~ div { background-color: #00FF00;}input[type="checkbox"]:checked + label { left: 40px;}
