Change Parent Div on Input[Type=Checkbox]:Checked with CSS

input[type="checkbox"][name^="vehicle"] {
  display: absolute;
  position: absolute;
  opacity: 0;
}

/* styles the <div> based on the checked/unchecked state
   of the <input> (this example assumes that the same
   highlight colour should be used regardless of which
   <input> is checked: */
input[type="checkbox"][name^="vehicle"]:checked ~ div {
  background-color: #ccc;
}

/* this is where it becomes obvious that JavaScript (or,
   ideally, a CSS selector that can refer to an attribute-
   variable) makes more sense; though with a CSS
   pre-processor this can be written effectively enough.
   Here when the #vehicle1 element is checked the <label>
   descendents with a "for" attribute equal to "vehicle1" of
   later-sibling <ul> elements are selected and styled: */
#vehicle1:checked~ul label[for=vehicle1] {
  background-color: gray;
}

/* as above, for the "vehicle2" id and for attributes: */
#vehicle2:checked~ul label[for=vehicle2] {
  background-color: gray;
}

#vehicle3:checked~ul label[for=vehicle3] {
  background-color: gray;
}

ul li {
  display: inline-block;
  padding: 20px;
  margin: 20px;
}

ul li label {
  padding: 20px;
  cursor: pointer;
}

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<div class="modify-box">
  BOX TO CHANGED
</div>
<ul>
  <li>
    <label for="vehicle1"> Bike</label><br>
  </li>
  <li>
    <label for="vehicle2"> Car</label><br>
  </li>
  <li>
    <label for="vehicle3"> Boat</label><br>
  </li>
</ul>

How to style the parent label of a checked radio input

A possibility

At my time of posting, I am not exactly sure what the desired layout should be, but there is one specific problem in the attempted CSS that needs to be addressed.

The adjacent siblings selector:

... separates two selectors and matches the second element only if it immediately follows the first element.

If the <input> is a child of the <label>, it isn't adjacent, so while:

label.radio input[type="radio"]:checked + label

is looking for a label immediately following a :checked input inside a label with the class .radio, nothing like that exists.

To alter the styling of the label in this case, would require a selector that affected the parent, which currently isn't possible.

So, to select the label of the :checked input, we need the label to be adjacent, not the parent.

We can use the for="id" attribute:

A <label> can be associated with a control either by placing the control element inside the <label> element, or by using the for attribute.

As I said, I'm not exactly sure what the desired layout should be, but here's an example using the for attribute, that doesn't look too bad.

div {  display: inline-block;  position: relative;}label {  background: #fcb608;  padding: 2px 10px 2px 1.5em;  border: 1px solid transparent; /* keeps layout from jumping */}input {  position: absolute;}input[type="radio"]:checked + label {  background: #000;  border-color: green;  color: white;}

<div>  <input id="id1" type="radio" name="ad_caroserie" value="0">  <label for="id1" class="radio">Berlina</label></div><div>  <input id="id2" type="radio" name="ad_caroserie" value="1">  <label for="id2" class="radio">Break</label></div><div>  <input id="id3" type="radio" name="ad_caroserie" value="2">  <label for="id3" class="radio">Cabrio</label></div>

& input[type=checkbox]:checked {
       color: #007884;
          cursor: pointer;
}