Replace Ubercart radio button with image? [duplicate]

Question

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!

Answer 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 */
}