HTML CODE:
<html>
<head>
<title>check box</title>
<link rel="stylesheet" type="text/css" href="1.page.css">
</head>
<body>
<ul>
<li>
<label>List Item 1
<input type="checkbox" name="">
<span class="check"></span></label>
</li>
<li>
<label>List Item 2
<input type="checkbox" name="">
<span class="check"></span></label>
</li>
<li>
<label>List Item 3
<input type="checkbox" name="">
<span class="check"></span></label>
</li>
<li>
<label>List Item 4
<input type="checkbox" name="">
<span class="check"></span></label>
</li>
</ul>
</body>
</html>
CSS CODE
body{
padding: 0;
margin: 0;
background-color: #00080c;
font-family: "Montserrat" , sans-serif;
}
ul{
margin: 0;
padding: 0;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
background: #00151f;
padding:10px 20px;
width: 600px;
border: 1px solid grey;
}
ul li{
list-style: none;
position: relative;
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,.2)
}
ul li:last-child{
border-bottom: none;
}
ul li label{
font-size: 64px;
color: #fff;
padding-left: 90px;
cursor: pointer;
}
ul li label input{
opacity: 0;
cursor: pointer;
}
ul li label .check{
position: absolute;
top: 20px;
left: 10px;
width: 50px;
height: 50px;
background-color: #000;
display: block;
box-sizing: border-box;
border:2x solid #000;
border-radius:12px;
}
ul li label .check:before{
content: "";
position: absolute;
top: 9px;
left: 9px;
right: 9px;
bottom: 9px;
background: #000b10;
border-radius: 2px;
transition: 0.5s;
transform:translateX(520px);
}
ul li label input:checked ~ .check:before{
background: #adff00;
box-shadow: 0 0 15px #adff00;
transform:translateX(0);
}
TrueCodes 
Leave a comment