Is it possible to dynamically change the font on radio buttons with CSS?

Question

I was trying to do this with jquery (How do I get javascript to run more than once?) but some people said it can be done easier with CSS. Right now I have JS that dynamically adds and removes the ez-selected class as seen below whenever a radio button is selected. This is used to replace the buttons with images.

Is there any way to use CSS so that when the ez-selected class is added, it turns the text in the span tag to bold and then removes the bold when the ez-selected class is removed? I cannot change the HTML structure as it's coded in my shopping cart software. Thanks!

EDIT: Is there any kind of CSS selector that can style the span closest to the input checked? I know with + it can select an element right after another element, but is there a way to just select the next span element after a checked radio button even if that span is in another div?

  <div class="row">
        <input name="TXT870" type="hidden" value="Option 1">
        <div class="col-xs-2">
            <div class="ez-radio (ez-selected)">
                <input class="clearBorder ez-hide" name="CAG3" onclick=
                "javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
                type="radio" value="870_625_0_625">
            </div><input name="CAG3QF1" type="hidden" value="0">
        </div>
        <div class="col-xs-7">
            <span>Option 1</span> <input class="transparentField" name=
            "CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
        </div>
    </div>

score 1 · Answer 1 · edited May 23 '17 at 10:33

The .ez-selected div is not a previous sibling or parent of the span...so NO...you can't.

Not with this structure

  <div class="row">
        <input name="TXT870" type="hidden" value="Option 1">
        <div class="col-xs-2">
            <div class="ez-radio ez-selected">
                <input class="clearBorder ez-hide" name="CAG3" onclick=
                "javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
                type="radio" value="870_625_0_625">
            </div><input name="CAG3QF1" type="hidden" value="0">
        </div>
        <div class="col-xs-7">
            <span>Option 1</span> <input class="transparentField" name=
            "CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
        </div>
    </div>

You would have to travel up the DOM first and you can't do that with CSS because there is no parent selector

That's exactly what I thought! I looked into parent selectors for CSS and there aren't any, so I thought I had to use JS. I was trying to do it with JS by adding a bold class to the parent .row div whenever the ez-selected class was added. I got it somewhat working, but still had issues. You can click the link in my first post to see the JS code I'm using if you are interested. — Gitman, Jul 16 '16 at 22:21

Is it possible to dynamically change the font on radio buttons with CSS?

1 Answers1