I was following a youtube tutorial and I have created this css button with checkbox. I would like to know how can I change body background when checkbox is checked. I am not really good with selectors. I would like to use only css and no javascript. Thank you
body {
margin: 0;
padding: 0;
background: #f3f3f3;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="checkbox"] {
position: relative;
width: 80px;
height: 40px;
-webkit-appearance: none;
background: #c6c6c6;
outline: none;
border-radius: 20px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
transition: .5s;
}
input:checked[type="checkbox"] {
background: #03a9f4;
}
input[type="checkbox"]:before {
content: "";
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
top: 0;
left: 0;
background: #fff;
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
input:checked[type="checkbox"]:before{
left: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center">
<input type="checkbox" name="">
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire