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

Question

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?

score 1 · Answer 1 · answered Jan 08 '22 at 19:21

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"
       class="pricingbox_radio"
       name="plan"
       / >
 <label for="radio-btn" class="pricingcard">
   <h2>
     <em>Hurray plan</em>
   </h2>
   <h3>$2 per month</h3>
    <ul>
     <li class="pricincard_list">A</li>
     <li class="pricincard_list">B</li>
     <li class="pricincard_list">c</li>
   </ul>
  </label>

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

1 Answers1