When radio button is checked. The containing box to be highlighted-CodePudding

I have a html element like this

 <label for="" className="pricingcard">
            <input
              type="radio"
              className="pricingbox_radio"
              name="plan"
            ></input>
            <h2>
              <em>Hurray plan</em>
            </h2>
            <h3>$2 per month</h3>

            <li className="pricincard_list">A</li>
            <li className="pricincard_list">B</li>
            <li className="pricincard_list">c</li>

            {/* </span> */}
          </label>

My CSS looks like this

pricingbox {
  display: flex;
  flex-direction: column;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  // margin: 10px;
}

.pricingcard {
  display: flex;
  flex-direction: column;
  background-color: white;
  margin: 2px;
  padding: 50px;
  width: 100%;
}

.pricingcard:hover {
  border: 3px solid var(--color-highlight);
}

.pricincard_list {
  width: 200px;
}

I want the box containing the radio button to have the same colour as .pricingcard:hover when radio button is in checked state. Can someone help me?

CodePudding user response：

you can use the operator, when it is checked then the label accepts the style

input[type="radio"]:checked label{border: 3px solid var(--color-highlight);}

CodePudding user response：

You need to make few changes in your code as follows to achieve the result which you wanted.

Note : I have placed radio button inside box using absolute position.

pricingbox {
  display: flex;
  flex-direction: column;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  position: relative;
}

.pricingcard {
  display: flex;
  flex-direction: column;
  background-color: white;
  margin: 2px;
  padding: 50px;
  width: 100%;
  cursor: pointer;
  border: 3px solid transparent;
  box-sizing: border-box;
}

.pricingcard:hover {
  border: 3px solid red;
}

.pricincard_list {
  width: 200px;
}
input.pricingbox_radio[type="radio"] {
  position: absolute;
  left: 30px;
  top: 30px;
}
input.pricingbox_radio[type="radio"]:checked   label {
  border: 3px solid red;
}

<input id="radio-btn"
       type="radio"
       
       name="plan"
       / >
 <label for="radio-btn" >
   <h2>
     <em>Hurray plan</em>
   </h2>
   <h3>$2 per month</h3>
    <ul>
     <li >A</li>
     <li >B</li>
     <li >c</li>
   </ul>
  </label>