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

Respuesta
1

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;}

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas