【问题标题】：Changing color of jQuery UI Buttons更改 jQuery UI 按钮的颜色
【发布时间】：2011-05-22 10:51:47
【问题描述】：

有没有一种简单的方法可以更改 jQuery UI 按钮的颜色？文档中不鼓励修改 css，无论如何这样做都很棘手。他们说，“我们建议使用 ThemeRoller 工具来创建和下载易于构建和维护的自定义主题。”我知道如何更改主题，但是如何在同一页面上获得不同颜色的按钮？

【问题讨论】：

标签： jquery html jquery-ui button jquery-ui-button

【解决方案1】：

最简单的方法是为您的按钮添加一个类（用于不同的颜色），然后使用一些覆盖 jquery-ui css 的 css。

例子

var $button = $(document.createElement('a'));
//add class
$button.addClass('redButton');
//call the jquery-ui button function
$button.button();

CSS

.ui-button.redButton {
    background-color: red;
}
.ui-button.greenButton {
    background-color: green;
}

【讨论】：

将背景颜色设置为红色实际上并不会改变按钮颜色
按钮背景是图像而不是简单的颜色，您需要更改 background-image 并可能添加 !important 以强制解决问题。
你可以输入background:red。 jquery使用背景元素来设置图片，所以用它来设置颜色会替换图片

【解决方案2】：

我只是这样做了：使用新颜色按钮创建一个新主题；从新的主题图像文件夹中复制 ..hard.. 和 ..soft... 渐变文件；重命名它们以免与主题混淆；最后将样式添加到按钮。这迎合了渐变和颜色...

我刚刚尝试了这个绿色按钮：

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;
}

【讨论】：

我按照这些思路做了一些事情，但改用了 css 渐变背景。我应该用我的解决方案更新问题......相反，我会把答案归功于你。
我之前也尝试过这些解决方案......我个人更喜欢上述答案而不是渐变。主要是因为跨浏览器的渐变支持并不统一。此外，您可以使用上述解决方案自定义相同的背景纹理，而使用渐变可能无法获得相同的纹理。缺点是您正在访问另一个图像元素 - 但如果您使用的是 jqueryui，则您已经在访问图像数量 - 再多 1 个应该不会产生太大差异。

【解决方案3】：

试试这个：

HTML：

<button type="button" id="change_color"> change button </button>

jQuery：

$("#change_color").css("background","green");

【讨论】：

【解决方案4】：

有两种（三种？）JQueryUI 按钮；基本上你会像这样创建button：

<span class="myButtons">Click here</span>

然后你告诉 JQueryUI 它是一个按钮：

$('span.myButtons').button()

因此产生这个标记：

<span class="myButtons ui-button ui-corner-all ui-widget" role="button">Click here</span>

你可以用“经典”的方式来设置这个样式：（.myButtons {}、.myButtons:hover {} 等）

但是！

如果您的“按钮”是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>

那么如果你应用这个方法：

$( "input" ).checkboxradio();

你会得到这个生成的标记（第二个伪按钮，“Paris”被选中/点击）：

<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>

然后those classes 可以（必须？）用于设置伪“按钮”的样式：

.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;
}

【讨论】：