Pastillero semanal
Un blíster de siete días: al marcar un día la burbuja se aplasta, la pastilla sale y el aluminio queda roto.
Ajustes
Código
<fieldset class="uvq02-bls"><legend>Pastillas de la semana</legend><div class="cd"><label><input type="checkbox" aria-label="Lunes"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">LUN</span></label><label><input type="checkbox" aria-label="Martes"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">MAR</span></label><label><input type="checkbox" aria-label="Miércoles"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">MIÉ</span></label><label><input type="checkbox" aria-label="Jueves"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">JUE</span></label><label><input type="checkbox" aria-label="Viernes"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">VIE</span></label><label><input type="checkbox" aria-label="Sábado"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">SÁB</span></label><label><input type="checkbox" aria-label="Domingo"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">DOM</span></label></div></fieldset>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Checkboxes
Ver todos: CheckboxesDónde usarlo
Este grupo de siete checkboxes se dibuja como un blíster de pastillas con lámina plateada y una burbuja por día. Al marcar un día su burbuja se aplasta, la cápsula de dos colores sale, el aluminio queda rasgado y el nombre del día cambia de color. Cada burbuja es un checkbox real con el nombre completo del día para lectores de pantalla. Encaja en apps de salud.
El color principal es una mitad de la cápsula y el resaltado del día; el secundario, la otra mitad. Cambia la leyenda para vitaminas o suplementos y úsalo en una vista semanal donde se vea de un vistazo lo que queda.