jQuery UI - 改变按钮颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10536541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI - changing button colours
提问by Nick
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:
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:
Apologies for my terrible red button mockup :-) Hopefully this will give you an idea of what I'm after. I've tried changing the class of both buttons/labels, but this isn't then reflected onto the jQuery-UI overlay.
为我糟糕的红色按钮模型道歉:-) 希望这能让你了解我所追求的。我尝试更改两个按钮/标签的类，但这并没有反映到 jQuery-UI 覆盖层上。
Here's my current code that is generating the buttons, and also displaying a tick or a cross depending on the selection:
这是我当前生成按钮的代码，并根据选择显示一个勾号或一个叉号：
$('.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();
}
});
Any help would be much appreciated - thanks!
任何帮助将不胜感激 - 谢谢！
回答by Code Maverick
What you need to do is overridethe jQuery UI default styling.
您需要做的是覆盖jQuery UI 默认样式。
Here's what the documentationstates:
以下是文档中的说明：
If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.button.css stylesheet that can be modified. These classes are highlighed in bold below.
Sample markup with jQuery UI CSS Framework classes
<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>
如果需要更深层次的自定义，可以修改 jquery.ui.button.css 样式表中引用的特定于小部件的类。这些类在下面以粗体突出显示。
带有 jQuery 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>
So basically, what you can do, is something like this:
所以基本上，你可以做的是这样的：
HTML:
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(Important! This styling MUST be declared AFTER the jQuery UI CSS file):
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:
jQuery：
$('#approvedToggle').buttonset();?
Output:
输出：
回答by Artron
I use this for JQueryUI Button
我将此用于 JQueryUI 按钮
CSS :
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 :
html :
<button class="red-button">Button</button>
For you case maybe can use :
对于你的情况也许可以使用：
CSS:
CSS：
input.red-button
input.red-button:hover
input.red-button:active
