Ad
Change Border When Radio-input = Checked
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
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad