jquery-mobile - 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。