Checkbox animado y personalizado con HTML y CSS. Sin JavaScript.

No necesitas usar JavaScript para crear y manejar un Checkbox personalizado. Gracias al uso de un label y el pseudo-elemento after, puedes estilarlo perfectamente.

En un short no me da tiempo de hablarte de todas las implicaciones de accesibilidad, por favor, tenlo en cuenta a la hora de implementarlo en tu página web.

#shorts

[johnentertained]

HTML:
<label>
<input type="checkbox">
<span></span>
</label>

CSS:
input {
display: none;
}

span {
display: inline-block;
position: relative;
height: 2em;
width: 2em;
background: black;
border-radius: 100%;
transition: all 0.7s;
}

label {
font-size: 2em;
cursor: pointer;
}

label input:checked ~ span {
box-shadow: 0 0 30px 0 #09f;
}

label input:checked ~ span:after {
opacity: 1;
}

span:after {
content: "";
position: absolute;
border: solid white;
border-width: 0 0.3em 0.3em 0;
transform: rotate(45deg);
width: 0.5em;
height: 1em;
left: 0.6em;
top: 0.25em;
opacity: 0;
transition: 0.3s ease;
}

[orochimarusaske]

Que moustro! lo usaré en mis proyectos! pedazo de código! cálidad! Gracias Midu

[agustinflores]

Agua de tamarindo que sabe a limón pero sabe a Jamaica ahr jaja me re perdí

[victorquinones]

Gracias midu!!!! Saludos desde Venezuela

[johnentertained]

Necesitamos un tutorial de Tauri Miguelito! 🙏🏽

[neolanis]

amigo me quedo genial, te pregunto como hago para que sea reponsive?

[solemme]

muy bueno, pero me queda una duda. cuando lo hacemos de esta forma logramos lo que queremos, pero pierde accesibilidad, inmediatamente le coloco display:none, deja de ser leido por los lectores de pantalla, como solucionarias ese detalle? alguna recomendacion?

[ericcartman]

Como hizo para que el seudoelemento de contenido " " quede con esa forma de tilde? Agrandó, rotó, colorizo ..pero no entiendo como se puede transformar en esa figura irregular de tilde. No entiendo ...
"" == ✓

[DiegoVallejoDev]

Parece buena idea, pero viendo desde las reglas A11y hay muchos problemas visuales

[hobar]

Cómo se aprende todo ese css, hay páginas de ejercicios?

[Mendu]

Que complicado el css en mi opinión... pero mola

[dinael]

Cuidado con el display: nene en un formulario que lo elimina del arbol de accesibilidad.

Mejor usar la típica clase sr-only

[jaimemartin]

Pero como se checkea el input si está oculto? Eso se puede?

[siroZzzz]

Entendí todo pero al mismo tiempo me perdí jajaja

[lmartinez]

Se chequea aunque no tenga display? Wtf

[kanonkn]

Excelente si quiere que tú sitio sea 0 accesible