different colors on radio buttons when they are active in Jquery mobile

Question

I have three radio buttons which have the same theme in jquery. If I select one of them, the color of the button will change to the color specified in my .ui-btn-active class in

Answer 1

Following styles should do the trick:

.ui-radio:nth-child(1) .ui-icon-radio-on.ui-icon{
    background-color:green;
}
.ui-radio:nth-child(2) .ui-icon-radio-on.ui-icon{
    background-color:grey;
}
.ui-radio:nth-child(3) .ui-icon-radio-on.ui-icon{
    background-color:red;
}​

Sample jsfiddle.

To style Horizontally stacked select options:

.ui-radio:nth-child(1) .ui-radio-on span.ui-btn-inner{
    background-color:green;
}
.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;
}​

Sample jsfiddle.

Answer 2

Why not just create custom themes for all of the states that you might want? You can have multiple custom themes, and only use them when you'd like. I have 7 themes in my CSS, and this way you can always incorporate them later if you'd like without having to do so much custom coding.

You can just apply the theme with the data-theme="f" (or other letter swatch) element attribute.

Here's jQuery ThemeRoller 1.1.1 http://jquerymobile.com/themeroller/index.php. If you're just making small changes to the theme, such as an active state, just copy the theme, and make the changes and save as a new swatch. You can go from A-Z :)