кто-нибудь знает, как я могу добавить изображение перед меткой, которая зависит от входного идентификатора или самого заголовка? Так что это из моего magento checkout, и я хочу показать изображение на основе метода оплаты. Это код
<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>
Вы можете сделать это с помощью элементов 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"
уникален, используйте это вместо селектора sibling или просто сгенерируйте имя класса на ярлыке на основе метода оплаты.
jsfiddle: http://jsfiddle.net/f1eLocoq/
Вы можете использовать конкретное фоновое изображение; это зависит от вашего макета, как это следует позиционировать и визуализировать, приведенный ниже код является примером:
#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>