• Categories
    • Coding
    • Design
    • Inspiration
    • News
    • WP Plugins
    • WP Themes
  • Start Here
    • How to Start a Blog
    • Make A Website
    • WordPress Hosting
    • Email Marketing
  • Freebies
  • Deals
    • WPEngine Coupon
    • WPX Coupon
    • Elegant Themes Coupon
    • View All Deals
  • Glossary

By editorial June 25, 2020

Task List

The functional demo can be seen above.

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.

Subscribe to Unlock
This freebie is available after subscription. You can cancel subscription anytime.

Related Freebies

Dark Login Form

Top Bar

Multi-colored Progress Bars

Related Posts

Reader Interactions

Droppin' design bombs every week!  5,751 subscriber so far!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Useful Guides

What is WordPress?
How To Make A Website - Step by Step Beginner's Guide
9 Best WordPress Hosting Options Compared for 2020
Managed WordPress Hosting 101: Is It Right for Your Business?
8 Best Backup WordPress Plugins Compared – 2020
6 Best Email Marketing Services of 2020 - A Detailed Comparison
14 Ways to Secure Your WordPress Site – Step by Step
18 Must-Have WordPress Plugins for 2020
Top 9 Email List Building Plugins for WordPress Compared (2021)
Build Your Tribe: 7 Top WordPress Membership Plugins Compared for 2021
Best Website Builder: Wix vs Squarespace vs Virb vs Weebly
8 Best WordPress Contact Form Plugins for 2021
A Guide to the Top 4 WordPress Ecommerce Plugins for 2020
How to Use Facebook Debugger and Open Graph to Fix Posting Issues
Top 10 Free Website Speed Test Tools for 2021
5 Top WordPress Landing Page Plugins Compared (2021)
6 Best WordPress Learning Management Systems (LMS) Plugins Compared
20 Best Google Fonts & How To Use Them
7 of the Best FTP Clients for Mac & Windows
11 Dropbox Alternatives to Securely Store Your Files in the Cloud
25 of the Useful and Best Brackets Extensions
What is Loremp Ispum? 18 Plain & Hysterical Lorem Ipsum Generators for 2021
How to Clear Browser Cache (Google Chrome, Firefox, Safari, Opera, Microsoft Edge, & Internet Explorer)

Latest Deals

  • Elegant Themes: 20% OFF on the best drag & drop theme & plugin
  • WPEngine Coupon: Get 20% off the best Managed WP Hosting
  • WPX Coupon: Get up to 50% off on one of the best hosting providers
  • Inmotion Coupon: 47% off + Free Domain on Inmotion hostnig
  • View More Deals  

Categories

  • Coding17
  • Design33
  • Freebies3
  • Inspiration28
  • News4
  • Resources33
  • WordPress5
  • WordPress Plugins23
  • WordPress Themes27
  • WP Hosting5
  • WP Tutorials20
Home About WordPress Hosting FTC Disclosure Privacy Policy Contact

© 2008-2021 All Rights Reserved.