Check Off To-Do List

Tasks

Lists


Code:

Tasks

Lists
CSS:
body{font:13px/20px 'Lucida Grande',Verdana,sans-serif;color:#404040;background:#f2f8fc}.tasks{margin:40px auto;width:240px;background:white;border:1px solid #cdd3d7;border-radius:4px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.05)}.tasks-header{position:relative;line-height:24px;padding:7px 15px;color:#5d6b6c;text-shadow:0 1px rgba(255,255,255,.7);background:#f0f1f2;border-bottom:1px solid #d1d1d1;border-radius:3px 3px 0 0;background-image:-webkit-linear-gradient(top,#f5f7fd,#e6eaec);background-image:-moz-linear-gradient(top,#f5f7fd,#e6eaec);background-image:-o-linear-gradient(top,#f5f7fd,#e6eaec);background-image:linear-gradient(to bottom,#f5f7fd,#e6eaec);-webkit-box-shadow:inset 0 1px rgba(255,255,255,.5),0 1px rgba(0,0,0,.03);box-shadow:inset 0 1px rgba(255,255,255,.5),0 1px rgba(0,0,0,.03)}.tasks-title{line-height:inherit;font-size:14px;font-weight:bold;color:inherit}.tasks-lists{position:absolute;top:50%;right:10px;margin-top:-11px;padding:10px 4px;width:19px;height:3px;font:0/0 serif;text-shadow:none;color:transparent}.tasks-lists:before{content:'';display:block;height:3px;background:#8c959d;border-radius:1px;-webkit-box-shadow:0 6px #8c959d,0 -6px #8c959d;box-shadow:0 6px #8c959d,0 -6px #8c959d}.tasks-list-item{display:block;line-height:24px;padding:12px 15px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tasks-list-item+.tasks-list-item{border-top:1px solid #f0f2f3}.tasks-list-cb{display:none}.tasks-list-mark{position:relative;display:inline-block;vertical-align:top;margin-right:12px;width:20px;height:20px;border:2px solid #c4cbd2;border-radius:12px}.tasks-list-mark:before{content:'';display:none;position:absolute;top:50%;left:50%;margin:-5px 0 0 -6px;height:4px;width:8px;border:solid #39ca74;border-width:0 0 4px 4px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.tasks-list-cb:checked~.tasks-list-mark{border-color:#39ca74}.tasks-list-cb:checked~.tasks-list-mark:before{display:block}.tasks-list-desc{font-weight:bold;color:#8a9a9b}.tasks-list-cb:checked~.tasks-list-desc{color:#34bf6e;text-decoration:line-through}input,input{display:none}