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は必要ありませんが、テンプレートを使用しており、動的に読み込まれます。ラジオボタンの前にezMarkjsをオフにするオプションはありますか？または、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

+セレクターを使用するには、要素が兄弟である必要があります。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 に答える