0

I have a product with three radio button options, and I want to replace those radio buttons with clickable images. This is how those radio buttons appear in the code:

<div class="form-radios" id="edit-attributes-51">

  <div class="form-type-radio form-item-attributes-51 form-item">
    <label for="edit-attributes-51-136" class="option radio"> <input type="radio" class="form-radio" value="136" name="attributes[51]" id="edit-attributes-51-136">Red, +$3.00 </label>
  </div>

  <div class="form-type-radio form-item-attributes-51 form-item">
    <label for="edit-attributes-51-135" class="option radio"> <input type="radio" class="form-radio" value="135" name="attributes[51]" id="edit-attributes-51-135">Green, +$5.00 </label>
  </div>

  <div class="form-type-radio form-item-attributes-51 form-item">
    <label for="edit-attributes-51-137" class="option radio"> <input type="radio" class="form-radio" value="137" name="attributes[51]" id="edit-attributes-51-137">Blue, +$10.00 </label>
  </div>

</div>

Instead of the radio button and label, I'd like to simply display a image color swatch. How can I accomplish this? I assume I'd need to somehow reference the "for" value in the "label", but I'm not sure how to do so. I'd prefer not to go the "nth child" route, but I can if I need to.

Thanks!

Improve this question
1
  • Perhaps, but I'm hoping it would be simpler than that... for instance, if someone can tell me how to style something based on that "for" value (<label for="edit-attributes-51-137" ...>
    – hockey2112
    Apr 11 '14 at 16:12
1

You can use CSS like so to target the labels:

label[for*="edit-attributes-51-"]{
   /* ADD YOUR IMAGE HERE */
}

or target the individual ones (135,136,xxx):

label[for="edit-attributes-51-135"]{
   /* ADD YOUR IMAGE HERE */
}
Improve this answer
1
  • Glad it will work for you :)
    – jasonflaherty
    Apr 11 '14 at 18:14

Not the answer you're looking for? Browse other questions tagged or ask your own question.