Create a to-do or onboarding checklist with custom checkboxes, crossed-out completed tasks, a live progress bar and a message when everything is done.
Runs entirely in your browser. Nothing is uploaded to any server.
Native inputs keep keyboard and screen reader support.
A bar and counter motivate people to finish.
The script handles any number of checklists on one page.
The real checkbox is visually hidden but still focusable, and a sibling span draws the box. The :checked + selector fills the box and scales in a tick mark made from two borders rotated by 45 degrees, so no icons or images are needed.
The completed style uses the general sibling selector, so the text is crossed out by CSS alone. JavaScript is only used to update the counter, the progress bar and the completion message.
A background line grows across the text and wraps across lines.
Keyboard users see a clear outline around the box.
role="progressbar" exposes the percentage to assistive tech.
Not by default. To keep ticks after a reload, save each checkbox state in localStorage inside the update function.
Yes. Every element with the data-pc attribute gets its own counter and progress bar.
Yes. Each item uses a native checkbox inside a label, so it is announced with its text and checked state.
The checkboxes and strike-through work with CSS only. Only the counter, bar and completion message need the script.
Change the border colour in the .pc-box::after rule, which is white by default.
More free tools from My Panda Toolbox.