jQuery UI - 更改按钮颜色

使用jQuery UI我有两个单选按钮Approve/Reject，我想独立设置样式，所以当选择Approve时，它将是蓝色的，当选择Reject时，这将是红色：jQuery UI - 更改按钮颜色

Nothing selected

Approve selected

Reject selected

道歉我可怕的红色按钮样机:-)希望这会给你的就是我以后的想法。我试着改变了这两个按钮/标签的类，但是这并没有反映到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(); 
    } 
});

任何帮助将非常感谢 - 感谢！

来源

2012-05-10 Nick

你有没有办法来区分这两个按钮类型？（看到你的一些标记和样式在这里会有帮助。）从你的截图看，蓝色色调直接应用于主题中的“.ui-button.ui-state-active”（无需代码），这是实际上是这样吗？ –

谢谢，是的，这是正确的:) – Nick

你可以发布你试过的jQuery吗？ – j08691

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

下面介绍一下documentation状态：

如果需要定制更深层次的，也有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>

所以基本上样品的标记，你可以做什么，是这样的：

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();

输出：

enter image description here

See the working jsFiddle demo

来源

2012-05-10 15:49:21

我很好奇;自定义CSS必须在jQuery UI之后声明吗？不会有以id，'＃id.ui-state-active'为前缀的类，不管它的位置如何，都会带来更多的权重并自动覆盖默认的'.ui-state-active'？ – ephemeron

在这个特定的情况下，是的。但是，如果要覆盖* all *按钮的活动状态，则只会使用类选择器，因此需要在jQuery UI css文件之后声明。作为一种最佳做法，我总是在jQuery UI css主文件之后包含我的覆盖式jQuery UI css样式。 –

这绝对是完美的，无论如何 - 非常感谢你！ :-) – Nick

我用这个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

来源

2015-10-27 16:04:39 Artron

这是伟大的，任何想法如何改变主动悬停的颜色？ – Mick

jQuery UI - 更改按钮颜色

回答

相关问题