5

选中单选按钮时，我试图使我的标签具有不同的样式。问题是我正在使用一个名为 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，但我正在使用模板并且它是动态加载的。是否有一个选项可以在单选按钮之前关闭 ezMark js？或者，尽管有 ezMark 脚本，也可以设置标签样式。

编辑

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

4

3 回答 3

4

这应该工作

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

于 2012-12-19T12:45:41.830 回答
1

您的元素需要是兄弟元素才能使用 ths+选择器。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/

于 2012-12-19T12:50:55.570 回答
0

怎么样

// 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'
});
于 2012-12-19T12:45:35.170 回答