jquery - jQuery UI - 改变按钮颜色

Question

Using jQuery UI I have two radio buttons, Approve/Reject, which I would like to style independantly, so when 'Approve' is selected, it will be blue, and when 'Reject' is selected, it will be red:

为我糟糕的红色按钮模型道歉:-) 希望这能让你了解我所追求的。我尝试更改两个按钮/标签的类，但这并没有反映到 jQuery-UI 覆盖层上。

这是我当前生成按钮的代码，并根据选择显示勾号或叉号：

$('.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();
    }
});

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

Answer 1

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

以下是文档所述：

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

带有 jQ​​uery UI CSS 框架类的示例标记

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> <span class="ui-button-text">Button Label</span> </button>

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

HTML：

<div id="approvedToggle">
    <input type="radio" id="ApproveButton" name="radio" />
    <label id="ApproveButtonLabel" for="ApproveButton">Approve</label>

    <input type="radio" id="RejectButton" name="radio" />
    <label id="RejectButtonLabel" for="RejectButton">Reject</label>
</div>​

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

#ApproveButtonLabel.ui-state-active { background: blue; }
#ApproveButtonLabel.ui-state-active span.ui-button-text { color: red; }

#RejectButtonLabel.ui-state-active { background: red; }
#RejectButtonLabel.ui-state-active span.ui-button-text { color: blue; }

jQuery :

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

输出：

查看工作中的 jsFiddle 演示

Answer 2

我将它用于 JQueryUI 按钮

CSS：

button.red-button
{
   background:radial-gradient(#FF0000,#660000);
   color:white;
   border-color:#660000;
}
button.red-button:hover
{ 
    background:radial-gradient(#FF0000,#880000);
   color:white;
   border-color:#660000;
}
button.red-button:active
{
    background:radial-gradient(#FF0000,#660000);
   color:white;
   border-color:#660000;
}

html：

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

对于您的情况，也许可以使用：

CSS：

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