Change the container background when a Radiobutton is clicked - html

Question

i just wanted to know if i got a container and inside the container there is a radio button so for styling i want the container to change its background color whenever i click on the radio button.
<div className='team'>
<div className="team__first-row">
<svg>{image}</svg>
<input type="radio" name="Monitor" id="Monitor" />
</div>
<p className="team__name">{teamName}</p>
</div>
.team {
border: var(--basic-border-color);
width: 19em;
height: 7em;
border-radius: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.team__first-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: .3rem .6rem;
margin-bottom: 2em;
}
input[type="radio"] {
appearance: none;
border-radius: 50%;
border: var(--basic-border-color);
width: 1.2rem;
height: 1.2rem;
cursor: pointer;
position: relative;
}
input[type="radio"]:focus {
border: none;
background: var(--container-bg);
}
input[type="radio"]::before {
content: "";
width: 0.2em;
height: 0.2em;
border-radius: 50%;
transform: scale(0);
transition: 120ms transform ease-in-out;
}
input[type="radio"]:focus::after {
content: url(../imgs/vuesax/bulk/Vector.svg);
position: absolute;
top: .12em;
left: .3em;
}
enter image description here
I tried to use the selectors between the parent container and the input but it seems like there is something missing !

Answer 1

Use :has selector
A recent addition to CSS language, :has() pseudo-class enables selecting a parent or sibling element. According to MDN documentation page
The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.
In a sample code snippet below, I used :has() selector to target "any .fruit div that has an input:checked" and updated its background color.
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
border: 1px solid #333;
padding: 20px;
width: 540px;
}
.fruit {
width: 120px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border: 1px solid #333;
padding: 20px;
margin: 0 15px 15px 0;
}
.fruit img {
border-radius: 50px;
}
label {
margin-top: 20px;
width: 100%;
}
input, label {
cursor: pointer;
}
.fruit:has(input:checked) {
background: yellow;
}
<div class="container">
<div class="fruit">
<img src="https://picsum.photos/30" alt="">
<input type="radio" name="team" id="Mango" value="Mango" />
<label for="Mango">Mango</label>
</div>
<div class="fruit">
<img src="https://picsum.photos/30" alt="">
<input type="radio" name="team" id="Pineapple" value="Pineapple" />
<label for="Pineapple">Pine Apple</label>
</div>
<div class="fruit">
<img src="https://picsum.photos/30" alt="">
<input type="radio" name="team" id="Dragonfruit" value="Dragonfruit" />
<label for="Dragonfruit">Dragonfruit</label>
</div>
</div>