BuddyPress.org

I am trying to add custom code to the edit page on my Buddypress profile form so that it displays images in place of radio buttons. This is the HTML code that is outputted:

<div class="radio">
    <span class="label">Hair Colour </span>
        <div id="field_521">
           <label><input checked="checked" name="field_521" id="option_533" value="Blonde" type="radio"> Blonde</label>
           <label><input name="field_521" id="option_534" value="Light Brown Brunette" type="radio"> Light Brown Brunette</label>
           <label><input name="field_521" id="option_535" value="Dark Brown" type="radio"> Dark Brown</label>
           <label><input name="field_521" id="option_536" value="Black" type="radio"> Black</label></div>
      <a class="clear-value" href="javascript:clear( 'field_521' );">Clear</a>
</div>  

I have found a number of different solutions for changing radio buttons to images using jQuery but none appear to suit the code that is outputted but the Buddypress profile page. Any help would be greatly appreciated.

Thanks