Показать изображение на основе идентификатора входа или названия через css

Question

Кто-нибудь знает, как я могу добавить изображение перед меткой, которая зависит от входного идентификатора или самого заголовка? Так что это из моего 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> 

Answer 1

Вы можете сделать это с помощью псевдопользователей элементов, за исключением того, что вы не можете поместить псевдопользователей элементы на входе.

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

Answer 2

Вы можете использовать специальное фоновое изображение; это зависит от вашего расположения, как это должно быть расположен и вынесенным ниже код является примером:

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