jQueryUI 按钮：如何更改按钮图标“颜色”

Question

我以如下方式在 div 中放置了一个 html 按钮：

<div class="ui-state-highlight">
    <button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary">
        <!-- first span -->
        <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
        <!-- second span -->
        <span class="ui-button-text">Save</span>
    </button>
    <!-- third span -->
    <span class="ui-icon ui-icon-info"></span>
    <strong>All</strong> form fields are required.
</div>

由于 div 被分配了 class:ui-state-highlight，因此 按钮的图标颜色已更改为 蓝色。

有没有办法可以将图标颜色恢复为：默认（黑色）颜色？

并且进一步，我需要第三个​​跨度中的图标具有ui-state-highlight的效果（颜色）。

我尝试将ui-state-default 应用于第一个跨度（包含图标），但这并没有达到预期的效果。

Answer 1

重写为容器应用的ui-state-highlight类（如divs和spans）修复问题。

Answer 2

您可以添加新样式，默认（黑色）图标颜色（http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_2e83ff_256x240.png）的图像路径

编辑：

或者将外部 div 类更改为 ui-state-default：

<div class="ui-state-default">
    <button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary">
        <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
        <span class="ui-button-text">Save</span>
    </button>
</div>

Answer 3

自己定义样式，如下所示：

.ui-icon-custom { background-image: url(images/custom.png); }

然后在调用.button()的时候就用它，像这样：

$('#button').button({
  label: 'Test',
  icons: {primary: 'ui-icon-custom', secondary: null}
});

这假定您的自定义图标位于 CSS 下的 images 文件夹中...与 jQuery UI 图标映射通常位于相同的位置。创建图标时，它会得到一个像这样的类：class="ui-icon ui-icon-custom"，并且该 ui-icon 类看起来像这样（可能是不同的图像，取决于主题）：

.ui-icon { 
  width: 16px; 
  height: 16px; 
  background-image: url(images/ui-icons_222222_256x240.png); 
}

因此，在您的风格中，您只需覆盖该背景图像，如果需要更改宽度、高度等。