工作示例:http: //jsfiddle.net/Gajotres/qkCZY/
版本 1
HTML:
<form>
<fieldset data-role="controlgroup" data-type="horizontal" id="custom-fieldset">
<legend>Horizontal:</legend>
<input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio"/>
<label for="radio-choice-h-2a">One</label>
<input name="radio-choice-h-2" id="radio-choice-h-2b" value="off" type="radio"/>
<label for="radio-choice-h-2b">Two</label>
<input name="radio-choice-h-2" id="radio-choice-h-2c" value="other" type="radio"/>
<label for="radio-choice-h-2c">Three</label>
</fieldset>
</form>
CSS:
#custom-fieldset div .ui-radio .ui-radio-on {
background: red !important;
}
版本 2
工作示例:http: //jsfiddle.net/Gajotres/hTY6k/
HTML:
<fieldset data-role="controlgroup" id="custom-fieldset">
<legend>Were you able to complete your visit today?</legend>
<label for="radio_1134198__4516395">Yes</label>
<input type="radio" id="radio_1134198__4516395" name="sdid_1134198" value="radio_1134198__4516395"/>
</fieldset>
CSS:
#custom-fieldset div .ui-radio label span .ui-icon-radio-on {
background-color: red !important;
}
最后的笔记
如果您想了解更多关于如何自定义 jQuery Mobile 页面和小部件的信息,请查看这篇文章。它附带了许多工作示例,包括为什么 !important 对于 jQuery Mobile 是必需的。