Radio with diff colors

radio with diff colors

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<div data-role="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">
        <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
            <legend>Choose an option:</legend>
            <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
            <label for="radio-choice-1">Can Meet</label>

            <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  />
            <label for="radio-choice-2">Not Sure</label>

            <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"  />
            <label for="radio-choice-3">Decline</label>
        </fieldset>
    </div>
</div>

CSS

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