Question

I’m using jquery-mobile 1.2.0.

If I create a control group that is horizontally aligned, with radio buttons in it, when the user selects the radio buttons they are highlighted and there is no circle with a dot in it.

<fieldset class="ui-block-b" data-role="controlgroup" data-type="horizontal">
    <legend>Pig is Drinking: </legend> 
    <input type="radio" name="assessmentDrinking" id="assessmentDrinking-Yes" value="1" />
    <label for="assessmentDrinking-Yes">Yes</label>
    <input type="radio" name="assessmentDrinking" id="assessmentDrinking-No" value="0" />
    <label for="assessmentDrinking-No">No</label>
</fieldset>

However, if I set the data-type to vertical, the circles with the dots appear and the selected radio is not highlighted. (By highlighted I mean the entire area behind the label is highlighted).

Is there a way to change this behavior?

Answer 1

.ui-radio:nth-child(1) .ui-radio-on .ui-btn-inner{
    background-color:green;
}
.ui-radio:nth-child(2) .ui-radio-on .ui-btn-inner{
    background-color:grey;
}
.ui-radio:nth-child(3) .ui-radio-on .ui-btn-inner{
    background-color:red;
}

Here’s a JSFiddle.

Also see this SO Question.