使用jQuery UI我有两个单选按钮,Approve / Reject,我想独立样式,所以当选择'Approve'时,它将是蓝色,当选择'Reject'时,它将是红色:
为我可怕的红色按钮样机道歉:-)希望这会让你知道我在追求什么。我已经尝试更改两个按钮/标签的类,但这不会反映到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();
}
});
非常感谢任何帮助 - 谢谢!
答案 0 :(得分:21)
您需要做的是覆盖 jQuery UI默认样式。
以下是documentation陈述的内容:
如果需要更深层次的定制,那么就有了 jquery.ui.button.css中引用的特定于小部件的类 可以修改的样式表。这些类以粗体显示 下方。
使用jQuery UI CSS Framework类进行示例标记
<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();
<强>输出强>:
答案 1 :(得分:1)
我将它用于JQueryUI Button
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