It seems like you've come across a style cascade issue. To fix this, simply ensure that the selectors for the parent elements are specific to each input.
For example:
.greencheckbox input[type=checkbox]:checked {
background-color: rgb(0, 160, 0);
}
.redcheckbox input[type=checkbox]:checked {
background-color: rgb(160, 0, 0);
}
body {}
.main_box {
background-color: #320082;
height: 500px;
width: 250px;
border: 2px solid #000000;
border-radius: 20px;
}
h1 {
text-align: center;
font-size: 40px;
color: #ff4da6;
}
h2 {
font-size: 16px;
text-align: center;
color: aliceblue;
}
.glow {
color: #fff;
text-align: center;
animation: glow 1s ease-in-out infinite alternate;
}
.greencheckbox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
redcheckbox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
input[type=checkbox] {
appearance: none;
height: 100px;
width: 100px;
background-color: rgb(175, 175, 175);
border-radius: 50%;
cursor: pointer;
}
thumb {
position: absolute;
font-size: 35px;
color: white;
}
.greencheckbox input[type=checkbox]:checked {
background-color: rgb(0, 160, 0);
}
.redcheckbox input[type=checkbox]:checked {
background-color: rgb(160, 0, 0);
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="module" src="https://unpkg.com/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons/ionicons.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="MainBox.css" />
<title>checkbox</title>
</head>
<body>
<div class="main_box">
<h1 class="glow">Wolfies</h1>
<h2>560 Bungalow St</h2>
</div>
<div class="greencheckbox">
<input type="checkbox">
<ion-icon name="thumbs-up" class="thumb"></ion-icon>
</div>
<div class="redcheckbox">
<input type="checkbox">
<ion-icon name="thumbs-down" class="thumb"></ion-icon>
</div>
</body>
</html>
BETTER SOLUTION
Another approach is to assign a class to each input to differentiate them. This way, even if you relocate the input within a different parent element, it will still maintain its checked state styles:
.greencheckbox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.redcheckbox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
input[type=checkbox] {
appearance: none;
height: 100px;
width: 100px;
background-color: rgb(175, 175, 175);
border-radius: 50%;
cursor: pointer;
}
.thumb {
position: absolute;
font-size: 35px;
color: white;
}
input[type=checkbox].green:checked {
background-color: rgb(0, 160, 0);
}
input[type=checkbox].red:checked {
background-color: rgb(160, 0, 0);
}
<script type="module" src="https://unpkg.com/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons/ionicons.js"></script>
<div class="greencheckbox">
<input type="checkbox" class="green thumbs-up">
<ion-icon name="thumbs-up" class="thumb"></ion-icon>
</div>
<div class="redcheckbox">
<input type="checkbox" class="red thumbs-up">
<ion-icon name="thumbs-down" class="thumb"></ion-icon>
</div>