Replace Ubercart radio button with image? 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:

&lt;div class="form-radios" id="edit-attributes-51"&gt;

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

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

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

&lt;/div&gt;


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