How can I style the legend of jquery-mobile radio buttons like a list divider

Question

Putting radio buttons in a fieldset with data-role="controlgroup", jquery-mobile renders them like an inset list, but the legend is simply text. I would like the legend to look like the list dividers of a list view.

So instead of this:

I would like something like that:

Answer 1

You could put the radiogroup inside of a listview, and use the listdivider style for the title. To get to a result which is similar to what you demonstrated, you need to remove some padding, margins and borders.

See this example: http://jsfiddle.net/zdMhF/

The code:

<div data-role="page">
    <div data-role="content">
<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Choose a pet:</li>
<li style="padding:0;border:0;">
<div data-role="fieldcontain" style="margin:0;">
    <fieldset data-role="controlgroup">
             <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
             <label for="radio-choice-1">Cat</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
             <label for="radio-choice-2">Dog</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
             <label for="radio-choice-3">Hamster</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
             <label for="radio-choice-4">Lizard</label>
    </fieldset>
</div>
</li>
</ul>
</div>
</div>​