通过css根据输入的id或标题显示图像

Question

有谁知道如何在依赖于输入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>

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

Answer 2

您可以通过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/