0

I have HTML structure that looks like -

<div class="form-check-inline">
  <label class="form-check-label">
  <input type="radio" class="form-check-input" name="optradio">TEXT A
  </label>
</div>

I want that when the input type is checked (checked being the inbuilt class that is added automatically on checking the radio button ), I apply a style before label.

In unchecked case -

label::before{
  /* something */
}

In checked case, I am writing something like this,

input[type='radio']:checked label::before{
  /* something */
}

I want to apply label::before where input[type='radio']:checked but I don't know how to merge these two conditions in CSS. I just need help with the syntax.

Can anyone please tell me ?

Thanks !!

Ityka Bandta
  • 105
  • 7
  • 2
    CSS doesn't allow to style a parent based on its child. But it does allow to style an element based on its previous sibling using the `+` combinator. If you decide to go that route, you'd have to change your markup like so: ` `. – Alexey Lebedev Sep 19 '20 at 04:18
  • Sorry, wrong order, the input would need to be first: ` `, then you could change the visual order using `flex-direction: row-reverse`. – Alexey Lebedev Sep 19 '20 at 04:20
  • 1
    Couple of examples here: https://stackoverflow.com/questions/2344273/style-a-label-based-on-its-inputs-state – Alexey Lebedev Sep 19 '20 at 04:22

1 Answers1

1

Solution

Use for attribute on label instead of nesting input inside of the label in order to use the the adjacent sibling combinator.

Example

HTML

<div class="form-check-inline">
    <input type="radio" class="form-check-input" name="optradio">

    <label class="form-check-label" for=“optradio”>
        TEXT A
    </label>
</div>

CSS

input[type='radio']:checked + label::before{
   /* something */
}

References

Adjacent sibling combinator: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

pygeek
  • 7,356
  • 1
  • 20
  • 41
  • I have a follow up question on this. I am unable to toggle between the styles for checked and unchecked. For example, the style for current checked radio should be undone if I click on next unchecked radio. But unable to do that. Is there a way this can be handled through CSS alone? ( I am adding an image before label ) – Ityka Bandta Sep 19 '20 at 05:23
  • @ItykaBandta style the default without the checked as you want it and it should apply. – pygeek Sep 19 '20 at 05:25
  • Yes. I did that... I don't know what I am missing. Please check my fiddle . (the icons wont display ! you can try with random images) https://jsfiddle.net/woke_mushroom/2sjypnor/20/ – Ityka Bandta Sep 19 '20 at 05:44
  • @ItykaBandta you need to include the input piece for the default behavior without checked due to specificity of the adjacent sibling operator overriding label default without the adjacent sibling operator. – pygeek Sep 19 '20 at 05:46
  • I added this - input[type=radio] + label::before {} for default behavior. But nothing :( – Ityka Bandta Sep 19 '20 at 05:53
  • @ItykaBandta your code in js fiddle works for me, which browser are you using? – pygeek Sep 19 '20 at 05:58
  • Chrome. I spot the mistake now ! I had been using same id for both the labels ! Thanks though !!! – Ityka Bandta Sep 19 '20 at 06:05