作業例: 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 ページとウィジェットをカスタマイズする方法について詳しく知りたい場合は、この記事をご覧ください。jQuery Mobile に !important が必要な理由など、多くの実用的な例が付属しています。