jQuery radiobutton

Hi,

I am trying to make my gravity forms radio buttons (and checkboxes) to look like this jQuery example:

http://jqueryui.com/button/#radio

I can't get it to work though. I does work when I use pure html but not in combination with the gravity forms radiobuttons.

Really would appreciate someone pointing me in the right direction or providing a working example in Gravity Forms.

Cheers,

Bart

The site isn't live yet, but I'll try and explain what I've done:

At this point I am just wondering if I can get the radiobuttons to be more like buttons so on mobile devices you can click a larger area and navigating becomes a bit easier.

Here's my code:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
   <script>
  jQuery(document).ready(function() {
  jQuery( "#radio_button" ).buttonset();
  });
  </script>

<form>
<div id="radio_button">
    <input type="radio" id="button1" name="test" /><label for="button1">button1</label>
    <input type="radio" id="button2" name="test" /><label for="button2">button2</label>
</div>
</form>

This works perfectly when just copied and pasted in a wordpress page.

When I try and use the very same code in a gravity form though it doesn't.

The only change I make is that I put this part:

<div id="radio_button">

</div>

In html blocks before and after my radiobutton fields.

Why wouldn't this work?

Works like a charm!

Thank you very much, this is great :)