CODEWITHSUNDEEP
javascriptcss
Ando
Ando

Reputation: 1827

style label of radio button which is into a div tag

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.

Upvotes: 5

Views: 3108

Answers (3)

Kyle
Kyle

Reputation: 67194

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/

Upvotes: 1

mkey
mkey

Reputation: 535

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/

Upvotes: 4

mplungjan
mplungjan

Reputation: 177689

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'
});

Upvotes: 0

Related Questions