改变 jQuery UI 按钮的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4391588/
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
Changing color of jQuery UI Buttons
提问by at.
Is there an easy way to change the color of a jQuery UI Button? Modifying the css is discouraged from the documentation and doing so anyway is tricky. They say, "We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain." I understand how to change the theme, but then how do you get different colored buttons on the same page?
有没有一种简单的方法可以更改 jQuery UI 按钮的颜色？文档中不鼓励修改 css，而且这样做很棘手。他们说：“我们建议使用 ThemeRoller 工具来创建和下载易于构建和维护的自定义主题。” 我了解如何更改主题，但是如何在同一页面上获得不同颜色的按钮？
采纳答案by Mark Redman
I just did this: create a new theme with the new colour button; copy the ..hard.. and ..soft... gradient files from the new theme images folder; rename them so as to not confuse them with the main theme; and finally add the style to the button. This caters for the gradient and the colour...
我就是这样做的：用新的颜色按钮创建一个新的主题；从新的主题图像文件夹中复制 ..hard.. 和 ..soft... 渐变文件；重命名它们以免与主题混淆；最后为按钮添加样式。这迎合了渐变和颜色......
I just tried this for a green button:
我只是试过这个绿色按钮：
a.green-button
{
background: url(Images/GreenBGHardGrad.png) repeat-x center;
border: 1px solid #132b14;
color:#FFFFFF;
}
a.green-button:hover
{
background: url(Images/GreenBGSoftGrad.png) repeat-x center;
border: 1px solid #132b14;
color:#FFFFFF;
}
a.green-button:active
{
background-color:#FFFFFF;
border: 1px solid #132b14;
color:#132b14;
}
回答by joekarl
Simplest way would be to add a class to your buttons (for different colors) and then have some css that overwrites the jquery-ui css.
最简单的方法是为您的按钮添加一个类（用于不同的颜色），然后使用一些 css 覆盖 jquery-ui css。
Example
例子
var $button = $(document.createElement('a'));
//add class
$button.addClass('redButton');
//call the jquery-ui button function
$button.button();
Css
css
.ui-button.redButton {
background-color: red;
}
.ui-button.greenButton {
background-color: green;
}
回答by Praveen Kumar K R
Try this:
尝试这个：
HTML:
HTML：
<button type="button" id="change_color"> change button </button>
jQuery:
jQuery：
$("#change_color").css("background","green");
回答by yPhil
There are two (three?) types of JQueryUI buttons ; Basically you make a buttonlike this:
有两种（三种？）类型的 JQueryUI 按钮；基本上你制作一个这样的按钮：
<span class="myButtons">Click here</span>
Then you tell JQueryUI that it's a button:
然后你告诉 JQueryUI 它是一个按钮：
$('span.myButtons').button()
Thus producing this markup:
因此产生这个标记：
<span class="myButtons ui-button ui-corner-all ui-widget" role="button">Click here</span>
And you can style this the "classic" way: (.myButtons {}, .myButtons:hover {}etc.)
你可以这样风格的“经典”的方式：（ .myButtons {}，.myButtons:hover {}等等）
But !
但 ！
If your "button" is one of checkboxradioor controlgroupthen it's anothermarkup:
如果您的“按钮”是checkboxradio或controlgroup之一，那么它是另一个标记：
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1">New York</label>
<input type="radio" name="radio-1" id="radio-1">
<label class"danger" for="radio-2">Paris</label>
<input type="radio" name="radio-1" id="radio-2">
<label for="radio-3">London</label>
<input type="radio" name="radio-1" id="radio-3">
</fieldset>
Then if you apply the method:
然后，如果您应用该方法：
$( "input" ).checkboxradio();
You get this generated markup (the 2nd pseudo button, "Paris" is checked/clicked):
你得到这个生成的标记（第二个伪按钮，“巴黎”被选中/点击）：
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>New York</label>
<input name="radio-1" id="radio-1" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
<label for="radio-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-checked ui-state-active"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>Paris</label>
<input name="radio-1" id="radio-2" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
<label for="radio-3" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>London</label>
<input name="radio-1" id="radio-3" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
</fieldset>
And then those classescan (must?) be used to style the pseudo "buttons":
然后这些类可以（必须？）用于设置伪“按钮”的样式：
.ui-visual-focus {
box-shadow: none;
}
label.ui-checkboxradio.ui-state-default {
color: black;
background-color: teal;
}
label.ui-checkboxradio.danger.ui-state-active {
background-color: red;
}
