jquery-mobile：突出显示垂直对齐控制组中的选定单选按钮

Question

我正在使用jquery-mobile 1.2.0。

如果我创建一个水平对齐的控制组，其中有单选按钮，当用户选择单选按钮时，它们会突出显示，并且没有带圆点的圆圈。

<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>

但是，如果我将data-type设置为vertical，则会显示带圆点的圆圈，并且不会突出显示所选的收音机。 （突出显示我的意思是标签后面的整个区域都会突出显示）。

有没有办法改变这种行为？

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;
}

这是JSFiddle。

另见SO Question。