0

I have the following HTML and for the life of me cannot figure out how to get the style to behave how I'd like.

<span>
    <span>
        <input id="myRadio" name="tab" role="radio" aria-checked="false" type="radio">
    </span>
    <label for="myRadio">Label</label>
<span>

I would like to be able to change the background color of the label or the outer span whenever the Radio Button is selected. I am not able to change the HTML since it is generated server side, otherwise I'd remove the span that surrounds the input and then use a sibling selector.

Is there any way to accomplish this without the use of javascript? I've got a feeling I won't be able to since there's no parent selector but I wanted to ask before giving up on the idea.

Matthew
  • 467
  • 6
  • 10
  • 2
    You either need to use javascript or to change the HTML. – ksav Dec 14 '18 at 16:27
  • @ksav I'd change the HTML if I could - it's the HTML generated from an Oracle ADF component. Thank you for the input though. – Matthew Dec 14 '18 at 16:31
  • 1
    Hello, I saw your question and I started looking for an answer, but when I thought I had blocked the answers here, and I was not allowed to comment because I did not have enough reputation. But I saved my solution to comment when I could. I think the question could continue if it were something like "how to put a background on a parent element too". – KevynTD Dec 16 '18 at 00:22
  • 1
    First of all, this solution is kind of a hacking, you really can not change a parent element with the current CSS3, maybe with CSS4 to do that, but there's a way to color the background anyway, using  ": before" or ": after", along with ": ckecked", so we create a new element every time it is checked, see my example: http://jsfiddle.net/Byte/7fb26ayq/ – KevynTD Dec 16 '18 at 00:22
  • 1
    Now let's take the considerations, first, the ": before" element will be over the radio / checkbox button, so I suggest putting a transparent background color to not cover it. Secondly, most values ​​need to be fine-tuned, as we're trying to put a box underneath a parent element, we can not get the full width, so it needs to be set by thinking of the unit as pixels, for example. I do not know how right the final version is on your page so I could not fine-tune it for you, all these values ​​can change: height, width, padding, background, top and left. Hope this helps! – KevynTD Dec 16 '18 at 00:22
  • 1
    @KevynTuleuDourado This should work for me! Thank you very much! – Matthew Dec 17 '18 at 14:19

0 Answers0