I'm working on making a thumbs-up/thumbs-down functionality, where pressing the thumb-up icon will turn the icon green and pressing the thumb-down icon will turn the icon red. However, I don't think I fully understand the 'checkbox' function in my css file.
The code I currently have right now turns each thumb red upon clicking on them. I take it this is happening because the two inputs I have near the bottom of my css file are conflicting and the red one comes last, hence it's getting priority. What I'm struggling with though is finding a way to differentiate the two inputs.
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%;
}
.thumb {
position: absolute;
font-size: 35px;
color: white;
}
input[type=checkbox]:checked {
background-color: rgb(0, 160, 0);
}
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@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/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>You are correct in that it's a style cascade issue. All you need to do is chain the selectors of the parent element to be specific for each input.
Like this:
.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@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/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>Or you could add a class to each input to differentiate. This would make more sense, since you could move that input to any parent, and it would retain it's :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@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/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>