Change border when radio-input = checked

Question

I got a label with an icon which is "connected" with an input, multiple times so my html looks like:

<label for="gutschein" class="col-md-3 row border mx-md-auto p-3">
   <span class="col iconify" data-icon="mdi:credit-card-plus-outline" data-inline="false">Gutschein</span>
   <h5 class="col pt-3">Gutschein</h5>
</label>
<input type="radio" id="gutschein" name="betrag" style="visibility:hidden ;" />

<label for="spenden" class="col-md-3 row border mx-auto p-3">
  <span class="col iconify" data-icon="fa-solid:donate" data-inline="false"></span>
  <h5 class="col pt-3">Spenden</h5>
</label>
<input type="radio" id="spenden" name="betrag" style="visibility: hidden;" />

Now if I click the icon the input will be checked, great! But I need a feedback for the user so if the radio input is checked the label border should be red. my css:

.gift_value {
            background: var(--blue);
            color: white;
            text-align: center;
            border-radius: 5px;
        }

I tried some JS function but nothing works, also I tried to set a class when input = checked like gift_value:checked:after or gift_value:focus vainly. Is there a special trick? Look up code here

Perhaps [CSS sibling selectors](https://css-tricks.com/child-and-sibling-selectors/) are what you're looking for? You may be able to do what you want without the use of a script. — t k, Apr 24 '20 at 08:16
can you create a snippet of it, because I don't see any input UI on it because you are using external library to achieve your goal — Nisharg Shah, Apr 24 '20 at 08:16

t k · Accepted Answer · 2020-04-24T09:01:59.773

If you change the order of the label and input elements of your html, you can use the + adjacent sibling combinator selector to apply a style to the corresponding label.

Html:

<input type="radio" id="gutschein" name="betrag" style="visibility:hidden ;" />
<label for="gutschein" class="col-md-3 row border mx-md-auto p-3">
    <span class="col iconify" data-icon="mdi:credit-card-plus-outline" data-inline="false">Gutschein</span>
    <h5 class="col pt-3">Gutschein</h5>
</label>


<input type="radio" id="spenden" name="betrag" style="visibility: hidden;" />
<label for="spenden" class="col-md-3 row border mx-auto p-3">
    <span class="col iconify" data-icon="fa-solid:donate" data-inline="false"></span>
    <h5 class="col pt-3">Spenden</h5>
</label>

CSS:

input:checked + label {
        background: var(--blue);
        color: white;
        text-align: center;
        border-radius: 5px;
    }

Change border when radio-input = checked

1 Answers1