jQuery UI-更改按钮颜色

使用jQuery UI，我有两个单选按钮，Approve/Reject，我希望独立设置其样式，因此当选择“Approve”时，它将为蓝色，当选择“Reject”时，它将为红色：

为我糟糕的红色按钮模型道歉：-）希望这能让你知道我在追求什么。我已经尝试更改两个按钮/标签的类，但是这并没有反映到jQueryUI覆盖上

以下是我当前生成按钮的代码，同时根据选择显示勾号或叉号：

$('.approvedToggle').buttonset();

$('input:radio').click(function() {
    if($(this).val() === 'approve') {
        $(this).parent('div').children(".tick").show();
        $(this).parent('div').children(".cross").hide();
    } else {
        $(this).parent('div').children(".tick").hide();
        $(this).parent('div').children(".cross").show();
    }
});

任何帮助都将不胜感激-谢谢

您需要做的是覆盖jQuery UI默认样式

以下是各州的情况：

如果需要更深层次的定制，有 jquery.ui.button.css中引用的特定于小部件的类 可以修改的样式表。这些课程以粗体突出显示 下面

jQueryUICSS框架类的示例标记

按钮标签

所以基本上，你能做的就是这样：

HTML：

批准
拒绝
​

CSS（重要！此样式必须在jQuery UI CSS文件之后声明）：

#ApproveButtonLabel.ui-state-active{背景：蓝色；}
#ApproveButtonLabel.ui-state-active span.ui-button-text{color:red；}
#RejectButtonLabel.ui-state-active{背景：红色；}
#RejectButtonLabel.ui-state-active span.ui-button-text{color:blue；}

jQuery：

$（'approvedToggle'）.buttonset（）；​

输出：

---

我将其用于JQueryUI按钮

CSS:

html:

<button class="red-button">Button</button>

---

你有办法区分这两种按钮类型吗？（在这里查看一些标记和样式会有所帮助。）从您的屏幕截图来看，蓝色色调似乎应用于

.ui按钮。ui状态直接在主题中处于活动状态（无需代码），是这样吗？谢谢，是的，没错：）您能发布您尝试过的jQuery吗？谢谢，我已经发布了我当前的jQuery，它至少会根据选择显示一个勾号/叉号；自定义css是否必须在jquery ui之后声明？以id为前缀的类，
#id.ui-state-active
是否具有更大的权重并自动覆盖默认的
.ui-state-active
，而不管其位置如何？在这种特定情况下，是的。但是，如果您要覆盖所有按钮的活动状态，那么您将只使用类选择器，因此，它需要在jQueryUICSS文件之后声明。作为最佳实践，我总是在jQueryUICSS主文件之后包含我的覆盖jQueryUICSS样式。这在各个方面都是绝对完美的-非常感谢！-）@CodeMaverick-如何使它适用于多个单选按钮？基本上，我正在为我的工作实现一个类似的功能，我创建了几个按钮来显示它是被批准的还是被拒绝的。目前，我已将
#approvedToggle
声明为类实体，以便我可以在其他按钮上申请。但每次我点击一个被批准或被拒绝的按钮时，它似乎会对其余按钮应用相同的格式和颜色。如何将其分开？@Jeiman-id是唯一的，因此多个
#approvedToggle
声明将是无效的HTML。您只需将
id=approvedToggle
更改为
class=approvedToggle
，然后您的jQuery调用将是
（'.approvedToggle'）.buttonset（）。查看它如何将
#
替换为
？这就是区分唯一id和类的方法。这很好，知道如何更改活动悬停的颜色吗？
<button class="red-button">Button</button>

input.red-button
input.red-button:hover
input.red-button:active