0

My issue is that I am using custom images for my radio buttons, so I have them set to display:none; but doing this means they are no longer being called out as required.

Is there a simple solution for this? The radio buttons MUST be images.

-Thanks

<label for="topsides">Top Sides</label>

<form action="" id="TopSideYearCubics_id">
<input class="radio" id="topsidescubicsides" type="radio" name="properties[Top Sides]" value="Cubic Sides" required="required">
<a id="topsidescubicsides_button" href="javascript:set_radio('topsidescubicsides');" class="radio-picture-150x150"  style="background: url(http://www.xxxx.com/_Store/_images2015/customring_buttons/button_CA01test_topsides_cubics.gif) no-repeat scroll 0 0;">&nbsp;</a>

<input class="radio" id="topsidesyearsides" type="radio" name="properties[Top Sides]" value="Year Sides">
<a id="topsidesyearsides_button" href="javascript:set_radio('topsidesyearsides');" class="radio-picture-150x150" style="background: url(http://www.xxxx.com/_Store/_images2015/customring_buttons/button_CA01test_topsides_years.gif) no-repeat scroll 0 0;">&nbsp;</a>

</form>
      <br />


<script>
  <!-- //## Sets the Image to the Radio Button ##//-->
function set_radio($inputid) {
$("input#" + $inputid).click();
}

$(document).ready(function() {

    $("a.radio-picture-150x150").click(function(){
        var $id = $(this).attr('id');
        $("a.radio-picture-150x150").removeClass('selected-border');
        $("a#" + $id).addClass('selected-border');
    });
});
</script>
<style>

input[type=radio], input[type=checkbox] {
display:none;
}

</style>
Magisch
  • 7,312
  • 9
  • 36
  • 52
Roger Edge
  • 9

1 Answers1

0

In my CSS, I just gave the input[type="radio"] a style of opacity:0; to get rid of the stock button, but still show the browser's "Please select one of these options" validation tool-tip when one of my custom radio images wasn't chosen.

chris
  • 577
  • 1
  • 9
  • 23