CSS Awesome Task List Check Box

Developer
Faizan Asad
Size
2,540 Kb
Views
48,576
  1. CSS Awesome Task List Check Box Previews
  2. CSS Awesome Task List Check Box HTML Codes
  3. CSS Awesome Task List Check Box CSS Codes

How do I make an css awesome task list check box?

By Faizan Asad.. What is a css awesome task list check box? How do you make a css awesome task list check box? This script and codes were developed by Faizan Asad on 04 July 2022, Monday.

CSS Awesome Task List Check Box Previews
IQ Test

CSS Awesome Task List Check Box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Awesome Task List Check Box</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en"> <!--<![endif]-->
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Task List</title> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body> <section class="tasks"> <header class="tasks-header"> <h2 class="tasks-title">Tasks</h2> <a href="index.html" class="tasks-lists">Lists</a> </header> <fieldset class="tasks-list"> <label class="tasks-list-item"> <input type="checkbox" name="task_1" value="1" class="tasks-list-cb" checked> <span class="tasks-list-mark"></span> <span class="tasks-list-desc">Check This</span> </label> <label class="tasks-list-item"> <input type="checkbox" name="task_2" value="1" class="tasks-list-cb" checked> <span class="tasks-list-mark"></span> <span class="tasks-list-desc">Then This</span> </label> <label class="tasks-list-item"> <input type="checkbox" name="task_3" value="1" class="tasks-list-cb"> <span class="tasks-list-mark"></span> <span class="tasks-list-desc">And Go!</span> </label> </fieldset> </section>
</body>
</html>
</body>
</html>

CSS Awesome Task List Check Box - Script Codes CSS Codes

@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tasks-header { position: relative; line-height: 24px; padding: 7px 15px; color: #5d6b6c; text-shadow: 0 1px rgba(255, 255, 255, 0.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, 0.5), 0 1px rgba(0, 0, 0, 0.03); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 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;
}
CSS Awesome Task List Check Box - Script Codes
CSS Awesome Task List Check Box - Script Codes
Home Page Home
Developer Faizan Asad
Username faizanasad
Uploaded July 04, 2022
Rating 3.5
Size 2,540 Kb
Views 48,576
Do you need developer help for CSS Awesome Task List Check Box?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Faizan Asad (faizanasad) Script Codes
Name
CSS3 Digital Lock
Snake Game
Amazing Tag Cloud
A Pen by Faizan Asad
Amazing CSS Menu with Notification Badges
Facebook nav
Stunning CSS3 Pagination
Slingshot Game
Amazing animated CSS Ghost Button
Chrome image Frame
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!