Показать изображение на основе введенного идентификатора или заголовка через CSS

1

кто-нибудь знает, как я могу добавить изображение перед меткой, которая зависит от входного идентификатора или самого заголовка? Так что это из моего 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>
  • 0
    Да, с javascript / jQuery, больше, чем это, станет руководством / практическим руководством, и это не то, что делает SO. Покажите нам, что вы пытались.
Теги:
magento

2 ответа

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" уникален, используйте это вместо селектора sibling или просто сгенерируйте имя класса на ярлыке на основе метода оплаты.

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

  • 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>
  • 0
    Это не будет работать, так как .payment_method в вашем примере не находится внутри #p_method_msp_ideal
  • 0
    О, я забыл + селектор. Спасибо за указание.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню