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

Question

does anybody know how I can add an image before the label that is dependent on the input id or the title itself? So this is from my magento checkout and I want to show an image based on the payment method. This is the code

<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

You could use a specific background image; it depends on your layout how this should be positioned and rendered, the below code is an example:

#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

You could do this via psuedo elements, except that you can't place psuedo elements on an input.

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

It's a bit of an inefficient selector but this should work:

input[title="iDEAL"] + label:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 12px;
  background: url(images/ideal.png);
}

Alternatively, if your for="p_method_msp_ideal" is unique, use this instead of the sibling selector, or just generate a class name on the label based on the payment method.

jsfiddle: http://jsfiddle.net/f1eLocoq/