style label of radio button which is into a div tag

Question

I'm trying to make my labels in a different style when the radio button is checked. The problem is that I'm using a javaScript plugin called ezMark which generates

Here is the code.

<div class="ez-radio">
    <input type="radio" id="line0" name="line-style" value="1" class="ez-hide">
</div>
<label style="background:url('1.jpg')no-repeat;" ></label>

and here is CSS that I tried to use to style the code

.ez-radio input:checked+label {...}

Honestly I don't need the javaScript on this page, yet I'm using templates and it is dynamically loaded. Is there an option to switch off the ezMark js before the radiobuttons? Or maybe style the label despite the ezMark script.

EDIT

The <div ez-radio is dynamically generated by the script. I have no control so that I can add the label between this div.

Answer 1

This should work

<div class="ez-radio">
    <input type="radio" id="line0" name="line-style" value="1" class="ez-hide">
    <label>Label</label>
</div>

CSS

.ez-radio input:checked+label {
    font-size:2em;
}

http://jsfiddle.net/CGjCb/

Answer 2

You elements need to be siblings to use ths + selector. CSS can't go "up" the DOM tree, so it will never find the label.

HTML

<div class="ez-radio">
    <input type="radio" id="line0" name="line-style" value="1" class="ez-hide">
    <label style="background:url('1.jpg')no-repeat;" >Label</label>
</div>

CSS:

.ez-radio input[type=radio]:checked + label 
{
    color: #0f0;
}​

http://jsfiddle.net/Kyle_/eCgyH/

---

After your edit about not being able to change the markup, you're going to have to resort to jQuery (javascript library.)

$('.ez-radio input[type=radio]') .change( function() {
        $('label').css('color', '#0f0');        
});

​ http://jsfiddle.net/Kyle_/eCgyH/1/