在Jquery mobile中活动时，单选按钮上的颜色不同

Question

我有三个单选按钮，在jquery中具有相同的主题。如果我选择其中一个，按钮的颜色将变为css中我的.ui-btn-active类中指定的颜色。我的单选按钮名为Can meet，不确定和拒绝。我希望我的Decline单选按钮在选择时具有与其他两种颜色不同的颜色（红色）。

我正在使用Jquery mobile并定制了css，我希望在不同的主题上使用哪种颜色，我已将.ui-btn-active更改为.ui-btn-active-a和.ui-btn -active-b并使它们具有不同的值。我试图在两个ui-btn-active类之间切换而没有运气，我已经尝试了addClass（..）和removeClass（..）而没有运气。我在我的jquery-mobile.js中创建了一个方法，如下所示：

 $.mobile.changeAction = function( activeBtn){
    $.mobile.activeBtnClass = activeBtn;
} 

其中我的activeBtn参数将是一个字符串，用于选择我想要的activeBtnClass。我认为问题是我在覆盖它后刷新activeBtnClass有问题，我尝试了一些令人耳目一新的方法而没有运气。

只要单选按钮在激活时有不同的颜色，我将非常感激。

Answer 1

以下样式应该可以解决问题：

.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;
}​

示例jsfiddle。

设置水平堆叠的选择选项的样式：

.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;
}​

示例jsfiddle。

Answer 2

为什么不为您可能想要的所有州创建自定义主题？您可以拥有多个自定义主题，并且只在您喜欢时使用它们。我的CSS中有7个主题，这样你可以随时将它们合并，如果你愿意，而不必做那么多的自定义编码。

您可以使用data-theme="f"（或其他字母样本）元素属性应用主题。

这是jQuery ThemeRoller 1.1.1 http://jquerymobile.com/themeroller/index.php。如果您只是对主题进行小的更改（例如活动状态），只需复制主题，然后进行更改并另存为新样本。你可以去A-Z：）