Ad

Change Border When Radio-input = Checked

- 1 answer

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

Ad

Answer

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;
    }
Ad
source: stackoverflow.com
Ad