Botón de alternancia de estilo iOS en CSS puro

Vista prévia

Descripción

interruptor de encendido/apagado estilo iOS implementado en HTML y CSS puros.

Funcionamiento

Cree una casilla de verificación normal para el botón de alternancia de iOS.

<input type="checkbox" id="demo">

Cree un elemento Label para la casilla de verificación.

<label for="demo">Toggle On/Off</label>

Las reglas básicas de CSS/CSS3 para transformar la casilla de verificación en un botón de alternancia de estilo iOS.

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {

position: absolute;

left: -9999px;
}

[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {

position: relative;

padding-left: 4em;

padding-top: .25em;

cursor: pointer;
}

[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before, [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {

content: '';

position: absolute;

height: 1.5em;

transition: all .5s ease;
}

[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {

left: 0;

top: 0;

width: 3em;

border: 2px solid #dddddd;

background: #dddddd;

border-radius: 1.1em;

z-index: -1;
}

[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {

left: .15em;

top: .125em;

background-color: #fff;

border-radius: 50%;

width: 1.5em;
}

[type="checkbox"]:checked + label:after { left: 1.65em; }

[type="checkbox"]:checked + label:before {

background-color: #72da67;

border-color: #72da67;
}