Question

我正在尝试在选中单选按钮时以不同的样式制作标签。问题是我正在使用一个名为ezMark的javaScript插件来生成

这是代码。

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

这是我试图用来设置代码样式的CSS

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

老实说，我不需要这个页面上的javaScript，但我正在使用模板，它是动态加载的。是否有选项可以在radiobuttons之前关闭ezMark js？或者，尽管使用了ezMark脚本，也可以设置标签样式。

编辑

<div ez-radio由脚本动态生成。我没有控制权，所以我可以在这个div之间添加标签。

Answer 1

这应该有效

<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

你的元素需要是兄弟姐妹才能使用+选择器。 CSS无法“升级”DOM树，因此它永远不会找到标签。

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/

在您编辑无法更改标记之后，您将不得不求助于jQuery（javascript库。）

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

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

Answer 3

怎么样

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

单选按钮的样式标签，进入div标签

3 个答案: