A simple task list with custom checkboxes and pure CSS icons.

The custom checkboxes are created using a combination of the :checked and ~adjacent sibling selectors. This allows us to dynamically style an element that comes after the checkbox, as if it were the checkbox itself. The native inputs can then be hidden from view while we keep the ability to click/toggle by wrapping everything in a label.

The check marks use the same technique described in the check buttons snippet.

The list/3-lines icon is made of a simple rectangle with two offset shadows.

Original PSD by Wassim Bourguiba.

Check out my new project: DevDocs is a web app that provides a fast, all-in-one interface for reading API docs such as HTML and CSS.