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.

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.

• javascript
• css

• label should be inside div element, if I'm understanding correctly. – mkey Commented Dec 19, 2012 at 12:46
• 1 You're missing a " at the end of class="ez-radio... – Kyle Commented Dec 19, 2012 at 12:48
• this was from typing quickly, i'm not missing it, i'll correct that. – Ando Commented Dec 19, 2012 at 12:51

3 Answers 3

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/CGjCb/

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/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/Kyle_/eCgyH/1/

How about

// to apply only to checkbox use:
$('input[type="checkbox"]').not(".ez-hide").ezMark({
 checkboxCls: 'your-default-checkbox-class-name' ,
 checkedCls: 'your-checkbox-class-in-checked-state'
});