How to change the border color of a div when clicking a radio button inside the same div?

So I'm currently working on a personal project. And came across with a problem.

I want my border color of this div to green when the user clicks the radio button inside that div. Like this: Here

But my current version looks like this: Here

Here is my HTML

<div class="backProjectCard backProjectCard2">  <input onclick="radioCheck();" type="radio" class="input">  <span class="checkmark"></span>  <h4 id="card-h">Bamboo Stand</h4>  <h3>Pledge $25 or more</h3>  <p id="left">left</p>  <h2 id="card2-num">101</h2>  <p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>  <hr>  <div class="pledgeSection">      <p>Enter your pledge</p>      <button class="btn-1 card2Btn">Continue</button>      <button class="btn-2">          <p>$</p>          <input value="25" class="input-price input-price2" type="number">      </button>  </div>  

CSS:

    .backProjectCard2 {       padding-right: 10px;   }      .backProjectCard {       border: 2px solid #ececec;       border-radius: 10px;       margin: 0 0 20px;       padding-top: 24px;       position: relative;       right: 5px;       width: 580px;   }   /*For Input and .checkmark*/      .backProjectCard input {       position: relative;       height: 20px;       width: 20px;       left: 20px;   }      .input {       position: absolute;       opacity: 0;       cursor: pointer;   }      .backProject input:checked~.checkmark {       background-color: #fff;   }      .checkmark {       position: absolute;       top: 27px;       left: 20px;       height: 18px;       width: 18px;       background-color: #fff;       border-radius: 50%;       border: solid #e0e0e0 1.7px;       z-index: -1;   }      .backProject input:checked~.checkmark:after {       display: block;   }      .backProject .checkmark:after {       top: 2px;       left: 3px;       width: 10px;       height: 10px;       border-radius: 50%;       background: hsl(176, 50%, 47%);   }      .checkmark:after {       z-index: 1;       content: "";       position: absolute;       display: none;   }  

JS (Only for clicking the radio button twice):

function radioCheck() {      timesClicked++      if (timesClicked > 1) {          $("input").prop("checked", false)          timesClicked = 0;      }  }  

https://stackoverflow.com/questions/66880891/how-to-change-the-border-color-of-a-div-when-clicking-a-radio-button-inside-the March 31, 2021 at 10:36AM