test2.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
display: inline-block;
font-family: sans-serif;
}
span{
font-family: sans-serif;
}
input[type=checkbox]{
appearance: none;
}
label{
border: 1px solid black;
width: 40px;
height: 20px;
border-radius: 20px;
cursor: pointer;
vertical-align: -7px;
}
label::after{
content: "";
width: 18px;
height: 18px;
border-radius: 18px;
margin: 1px 0px 0px 1px;
background-color: black;
position: absolute;
transition: 0.5s ease margin-left;
}
input[type=checkbox]:checked + label::after{
margin-left: 21px;
}
label{
display: inline-block;
}
.checkboxcontainer{
display: block;
padding: 4px;
}
.veld{
display: inline-block;
padding: 5px;
width: 120px;
text-align: end;
}
body{
transition: 0.3s linear background-color;
}
</style>
</head>
<body>
<?php
for($i = 0; $i < 4000; $i++){
echo "<input type='checkbox' id='$i' onchange='change()'><label for='$i'></label>";
}
?>
<script>
function change(){
document.body.style.backgroundColor = "hsl(" + Math.floor(Math.random() * 360) + ", 100%, 50%)"
}
</script>
</body>
</html>
Resultaat
Made by Thijs Aarnoudse