Interruptores de estilo de Windows 10 en Pure CSS/CSS3

Vista prévia

Descripción

Una solución CSS pura que convierte las entradas de casilla de verificación normales en conmutadores de alternancia estilo ventana 10.

Funcionamiento

Envuelva la casilla de verificación en un elemento Label como este:

<label class="toggle">

<input type="checkbox" onclick="toggle(this,event)"/>

<div data-off="Off" data-on="On">Notification</div>
</label>

Los estilos CSS principales:

.toggle {

display: table;

-webkit-tap-highlight-color: transparent;

margin-bottom: 1rem;
}

.toggle input:focus + div { text-decoration: underline; }

.toggle > div {

cursor: pointer;

border-radius: 2rem;

width: 5rem;

height: 2rem;

background: white;

border: 2px solid black;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

position: relative;

-webkit-transition: 200ms ease-out;

transition: 200ms ease-out;

font-size: 0;
}

.toggle > div:hover { box-shadow: 0 0 6px #005ca4; }

.toggle > div:before {

will-change: translate;

display: block;

position: absolute;
 top: calc(50% - .5rem);
 left: .5rem;

content: '';

width: 1rem;

height: 1rem;

background: black;

border-radius: 50%;

-webkit-transition: 200ms;

transition: 200ms;
}

.toggle > div:after {

font-size: 1rem;

position: absolute;

right: -50%;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

content: attr(data-off);

pointer-events: none;
}

.toggle input:checked + div {

background: #0078d7;

border-color: #0078d7;
}

.toggle input:checked + div:before {

color: #0078d7;

-webkit-transform: translateX(280%);

transform: translateX(280%);
 -webkit-transform: translateX(calc(2.5*100% + 4px));
 transform: translateX(calc(2.5*100% + 4px));

background: white;
}

.toggle input:checked + div:after { content: attr(data-on); }

input:focus + div:after { text-decoration: underline; }

Además, puede controlar los eventos de alternancia mediante JavaScript:

window.log = console.log.bind(console);

function $(expr, context) {

return (context || document).querySelector(expr);
}

function $$(expr, context) {

return [].slice.call((context || document).querySelectorAll(expr), 0);
}

function prepend(element, into) {

if (element && into)


into.insertBefore(element, into.firstChild);
}

let info = $('.toggles-info'),

inputs = $$('.toggle input');

function showInfo(styledElement) {

let div = document.createElement('div'),


str = '';

inputs.forEach(input => {


str += input.checked ? '<span on> on </span> ' : '<span off> off </span>';

});


if (styledElement) {


str += `<span click>click: ${styledElement.innerHTML}</span>`;

}


div.innerHTML = str;

prepend(div, info);
}

function toggle(element, event) {

showInfo(element.nextElementSibling);
}

showInfo();

Cree un elemento DIV para colocar la información de alternancia.

<div class="toggles-info"></div>