I am trying to make a checkbox I made into a button highlight its border and background on click but its not working.
and this is my code
<div id="ck-button">
<label id="label">
<input id="checkbox" type="checkbox" value="1" />
<span className="title">Respirators</span>
<span className="description">
Surgical N95 or equivalent
</span>
</label>
</div>
css
#ck-button label {
width: 85%;
border: 2px solid #eaf2fd;
padding: 15px;
border-radius: 3px;
display: flex;
}
#ck-button label span {
padding: 3px 0px;
}
#ck-button .title {
color: #304256;
font-weight: 600;
font-size: 1em;
}
#ck-button .description {
color: #6984a3;
font-weight: 400;
margin-left: 7px;
font-size: 15px;
}
#ck-button label input {
position: absolute;
top: -20px;
}
#ck-button input:checked + span {
color: #2f80ed;
}
#ck-button input:checked ~ #label {
background-color: red;
}
I've also tried this but it's not working
#ck-button input:checked + label {
background-color: red;
}