4 CSS To-Do Lists: Free Code Snippets & Examples

css by Vladimir 1 min read

Task lists are the cognitive backbone of productivity interfaces — they transform open-ended goals into checkable, completable items. CSS to-do lists handle the visual feedback of task completion entirely through native form states, keeping the interaction lightweight and deterministic.

  • Each task uses <input type=\"checkbox\"> with the :checked pseudo-class and sibling combinators to toggle text-decoration: line-through and opacity changes on the task label, requiring zero JavaScript for visual feedback.
  • Custom checkmarks are rendered with ::before pseudo-elements on the label, using border and transform: rotate() to create checkmark shapes that animate smoothly on the compositor thread.
  • Semantic HTML with <label> wrapping ensures that clicking the task text toggles the checkbox, maintaining accessibility without requiring explicit for attribute matching.

Browse the collection to find a to-do list format that fits your productivity flow — from simple checklists with animated strikethrough to priority-coded task lists with drag handles.

Table of Contents:

  1. Examples
  2. Frequently Asked Questions

Examples

Animated to-do list checkbox that transforms into a strikethrough line that crosses out the task text when checked

Animated Striking Checkbox

This is an Animated Striking Checkbox. It transforms a standard checkbox into a highly expressive UI element that physically becomes the strikethrough line for its associated label. Its function is to provide satisfying, immediate feedback for to-do list items, visually linking the action of checking a box to the result of striking out the text.

Technologies:
HTML CSS JavaScript
Difficulty: Intermediate
Browser Support (as of Mar 2026):
Chrome Chrome 60+ Edge Edge 79+ Firefox Firefox 55+ Safari Safari 11+
Features:
Strikethrough Animation Morphing UI Dark Mode
Code by: Jon Kantner Jon Kantner
License: MIT

See the Pen Animated Striking Checkbox.

Animated task list item with morphing SVG flag and interactive checkbox including strike-through text effect

Interactive Morphing Task List Item

This Interactive Morphing Task List Item is a high-fidelity productivity component. It combines path interpolation with auditory feedback to validate user actions. Its function is to elevate simple “to-do” lists into rewarding, tactile experiences through state-driven motion. (Requires: GSAP, MorphSVGPlugin)

Technologies:
HTML SCSS JavaScript
Difficulty: Advanced
Features:
SVG Morphing Audio Feedback Micro-interactions
Code by: Aaron Iker Aaron Iker
License: MIT
List Styles

List Styles

An aesthetically pleasing, modern todo list featuring a vibrant gradient theme and an intuitive hierarchy creation function without complex control buttons.

See the Pen List Styles.

AutoSort ToDo List (CSS Only)

AutoSort ToDo List (CSS Only)

A ToDo list with a unique feature: automatic sorting of completed tasks to the end of the list, implemented without JavaScript, using the Flexbox order property and the powerful CSS :has() selector.

See the Pen AutoSort ToDo List (CSS Only).

Frequently Asked Questions

What is the advantage of using the :checked pseudo-class for to-do lists over JavaScript state management?

The :checked pseudo-class combined with sibling combinators (~ or +) enables task completion styling — strikethrough text, opacity reduction, and checkmark toggles — entirely through CSS. This eliminates JavaScript state management for visual feedback, keeping the interaction layer on the compositor thread.

How do I ensure custom checkbox to-do items remain accessible?

Use a <label> wrapping both the <input type="checkbox"> and the task text, so clicking anywhere on the item toggles the state. Use :focus-visible on the hidden checkbox to provide clear keyboard focus indicators matching the custom checkmark style.

Which CSS properties create task completion animations without triggering reflows?

Use opacity for fade effects, transform: translateX() for slide-out completion, and text-decoration: line-through with transition for strikethrough — all compositor-friendly properties that animate without layout recalculations.

How should to-do lists adapt responsively without breaking the task layout?

Use Container Queries to adjust task item padding, font size, and checkmark dimensions based on the available list width. On narrow containers, collapse multi-column task grids to a single column using grid-template-columns: 1fr.