| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <title>Select List Item</title>
|
| </head>
|
| <body>
|
| <div class="list">
|
| <h2>Pure CSS To Do List </h2>
|
|
|
| <ul>
|
| <li>
|
| <label>
|
| <input type="checkbox" name="">
|
| <p>Eat</p>
|
| <span></span>
|
| </label>
|
| </li>
|
|
|
| <li>
|
| <label>
|
| <input type="checkbox" name="">
|
| <p>Work</p>
|
| <span></span>
|
| </label>
|
| </li>
|
|
|
| <li>
|
| <label>
|
| <input type="checkbox" name="">
|
| <p>Sleep</p>
|
| <span></span>
|
| </label>
|
| </li>
|
|
|
| <li>
|
| <label>
|
| <input type="checkbox" name="">
|
| <p>Bath</p>
|
| <span></span>
|
| </label>
|
| </li>
|
|
|
| <li>
|
| <label>
|
| <input type="checkbox" name="">
|
| <p>Exercise</p>
|
| <span></span>
|
| </label>
|
| </li>
|
| </ul>
|
| </div>
|
|
|
| </body>
|
| </html>
|
|
|
|
|
| <style type="text/css">
|
| *{
|
| margin: 0px;
|
| padding: 0px;
|
| box-sizing: border-box;
|
| font-family: arial;
|
| }
|
| body{
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| min-height: 100vh;
|
| background-color: #111;
|
| }
|
| .list{
|
| position: relative;
|
| background-color: #fff;
|
| width: 350px;
|
| }
|
| .list h2{
|
| background-color: #03a9fa;
|
| color: #fff;
|
| padding: 10px 20px;
|
| font-weight: 600;
|
| }
|
| .list ul{
|
| position: relative;
|
| padding: 20px;
|
| }
|
| .list ul li{
|
| position: relative;
|
| list-style: none;
|
| padding: 15px 0px;
|
| border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
| }
|
| .list ul li:last-child{
|
| border-bottom: none;
|
| }
|
| .list ul li label{
|
| position: relative;
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| cursor: pointer;
|
| }
|
| .list ul li label input{
|
| visibility: hidden;
|
| appearance:none;
|
| }
|
| .list ul li label p{
|
| position: absolute;
|
| }
|
| .list ul li label span{
|
| position: relative;
|
| width: 20px;
|
| height: 20px;
|
| border: 1px solid #ccc;
|
| border-radius: 50%;
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| }
|
| .list ul li label span:before{
|
| content: '';
|
| position: absolute;
|
| top: 5px;
|
| width: 10px;
|
| height: 5px;
|
| border-left: 2px solid #ccc;
|
| border-bottom: 2px solid #ccc;
|
| transform:rotate(-40deg);
|
| }
|
| .list ul li label input:checked ~ p{
|
| text-decoration: line-through;
|
| color: #ccc;
|
| }
|
| .list ul li label input:checked ~ span{
|
| background-color: #03a9fa;
|
| border: 1px solid #03a9fa;
|
| }
|
| .list ul li label input:checked ~ span::before{
|
| border-left: 2px solid #fff;
|
| border-bottom: 2px solid #fff;
|
| }
|
| </style>
|
| |
Comments
Post a Comment