Change the container background when a Radiobutton is clicked-CodePudding

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 !

CodePudding user response：

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 >
  <div >
    <img src="https://picsum.photos/30" alt="">
    <input type="radio" name="team" id="Mango" value="Mango" />
    <label for="Mango">Mango</label>
  </div>
  <div >
    <img src="https://picsum.photos/30" alt="">
    <input type="radio" name="team" id="Pineapple" value="Pineapple" />
    <label for="Pineapple">Pine Apple</label>
  </div>
  <div >
    <img src="https://picsum.photos/30" alt="">
    <input type="radio" name="team" id="Dragonfruit" value="Dragonfruit" />
    <label for="Dragonfruit">Dragonfruit</label>
  </div>
</div>

Use :has selector

Use `:has` selector