有人知道如何在依赖于输入ID或标题本身的标签之前添加图像吗?所以这是我的magento结账,我想根据付款方式显示图片。这是代码
<dt>
<input id="p_method_msp_ideal" value="msp_ideal" type="radio" name="payment[method]" title="iDEAL" class="radio validate-one-required-by-name">
<label for="p_method_msp_ideal">iDEAL</label>
</dt>
答案 0 :(得分:1)
您可以使用特定的背景图片;这取决于你的布局应该如何定位和渲染,下面的代码是一个例子:
#p_method_msp_ideal + .payment-method{
width: 18px;
height: 12px;
background: url(images/ideal.png);
}
<dt>
<input id="p_method_msp_ideal" value="msp_ideal" type="radio" name="payment[method]" title="iDEAL" class="radio validate-one-required-by-name">
<span class="payment-method"></span>
<label for="p_method_msp_ideal">iDEAL</label>
</dt>
答案 1 :(得分:0)
您可以通过psuedo元素执行此操作,但不能将psuedo元素放在输入上。
<dt>
<input id="p_method_msp_ideal" value="msp_ideal" type="radio" name="payment[method]" title="iDEAL" class="radio validate-one-required-by-name">
<label for="p_method_msp_ideal">iDEAL</label>
</dt>
这是一个效率低下的选择器,但这应该有效:
input[title="iDEAL"] + label:before {
content: "";
display: inline-block;
width: 18px;
height: 12px;
background: url(images/ideal.png);
}
或者,如果您的for="p_method_msp_ideal"
是唯一的,请使用此代替兄弟选择器,或者仅根据付款方式在标签上生成类名。
jsfiddle:http://jsfiddle.net/f1eLocoq/