CSS Custom Checkbox List Design | Html and CSS

Please LIKE our Facebook page for daily updates...

Track: Cadmium - Melody (feat. Jon Becker)

[drratnapandey]

All your videos are very useful but I suggest you to change the background song🐍👀👅

[upendrakumarpatel]

Aap kon sa software use kr rhe ho bata

[enormouspower]

Bro which software are you using for this ? It will be helpful if anyone told me. 😃

[abhisheksoni]

Can you please make video on styling input type="file"

[ArjunKiLife]

Sir aapka koi blog h jaha se hum coding utha skte h.... different types ki

[YardCricket]

My code is not checking the lists with yellow marker can anyone tell me what's wrong with my css code

body {
margin: 0;
padding: 0;
font-family: monospace, sans-serif;
background: #00080c;
}

ul {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #00151f;
padding: 10px 20px;
width: 200px;
border-radius: 1px solid rgba(0, 0, 0, .5);
}

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: 18px;
color: #fff;
padding-left: 30px;
cursor: pointer;
}

ul li label input {
opacity: 0;
cursor: pointer;
}

ul li label .check {
position: absolute;
top: 10px;
left: 0;
width: 20px;
height: 20px;
background: #000;
display: block;
box-sizing: border-box;
border-radius: 4px;
}

ul li label .check::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
background: #000b10;
border-radius: 2px;
transition: 0.5s;
transform: translateX(185px);
}

ul li label input:checked ~ .check::before {
background: #adff00;
box-shadow: 0 0 15px #adff00;
transform: translateX(0);
}

[미미미-iz]

ul li label {position: relative} // missing

[benjamins.]

A video of text being typed -- possibly the worst way to share code.