HTML + CSSCheckboxes
Tarea con check redondo
El círculo se rellena con un check mientras una línea tacha la tarea y el texto se apaga.
Ajustes
16px
1x
Código
<label class="uv-ck2t"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Terminar el diseño</span></label>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
Dónde usarlo
Pensado para listas de tareas: los pendientes de una app de gestión de proyectos, la lista de cosas para la maleta o los pasos de una receta que vas marcando mientras cocinas. La línea cruza el texto y la tarea se atenúa, así lo que falta por hacer destaca solo. Un checkbox de tareas con tachado, en HTML y CSS.
Funciona mejor con textos cortos. Si una tarea ocupa dos líneas, el tachado solo cruza la primera, así que escribe tareas breves o dale a la lista un poco más de ancho.