AIMRAN
HTML + CSSCheckboxes

Strikethrough task item

A to-do row where checking the circle draws a line through the text and fades it out.

Settings

16px
1x

Code

<label class="uv-ct"><input type="checkbox"><span><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><em>Buy milk</em></label>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Checkboxes

Self-drawing checkbox

CheckboxesHTML + CSS

Round fill checkbox

CheckboxesHTML + CSS

Confetti burst checkbox

CheckboxesHTML + CSS

3D flip checkbox

CheckboxesHTML + CSS

Heart like button

CheckboxesHTML + CSS

Bouncy drawn checkbox

CheckboxesHTML + CSS

Circle fill checkbox

CheckboxesHTML + CSS

Checkbox with particle burst

CheckboxesHTML + CSS

Where to use it

This is the familiar to-do list checkbox: tick the circle and a line crosses out the task while the text fades. It fits a shopping list app, the checklist of a wedding planner, the ingredients of a recipe you are cooking along with or the tasks of a small project board. The whole row is clickable.

Keep each task to a single line. The strike is drawn through the middle of the text, and a label that wraps would only be half crossed out. Stack several rows with a small gap and you have a working list.