0

I have a label element containing a radio button and the reason for this structure is to make the label clickable.

<label><input type="radio" name="checkbox" value="128GB">128GB</label>

However, I need to style the label if the button is checked. I understand there is no parent selector so how can I achieve this without losing the click-ability of the label? is there a solution apart from using JavaScript?

Sami Al-Subhi
  • 4,406
  • 9
  • 39
  • 66
  • 1
    @LukeRamsden I think part of it only - to achieve clickability it needs `for`, but to style is a different matter. – Fabio Lolli May 16 '18 at 14:07
  • 1
    The most compatible solution is a duplicate of linked question, not your question in itself :) The modern solution is/will be [`:focus-within`](https://css-tricks.com/almanac/selectors/f/focus-within/) - [demo](https://github.com/scottaohara/css-focus-within-demos) but it isn't compatible with Edge (and IE11 obviously) – FelipeAls May 16 '18 at 14:18

1 Answers1

1
<input type="radio" name="checkbox" value="128GB" id="checkbox" />
<label for="checkbox">128GB</label>

And then you can select it with:

input[type="radio"]:checked+label
Luke Ramsden
  • 704
  • 4
  • 15
  • 2
    Also, I don't have enough reputation to comment on the main post, but this is probably a better link for me to report this as duplicate of: https://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label – Luke Ramsden May 16 '18 at 14:11