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 分配了类ui-state-highlight，按钮的图标颜色已更改为 blue 。

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

进一步，我需要第三个范围中的图标才能获得ui-state-highlight的效果（颜色）。

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

Answer 1

重写应用于容器的ui-state-highlight类（例如 divs和span ）可以解决问题。

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

最简单的方法是在按钮中添加一个类（用于不同的颜色），然后使用一些css覆盖jquery-ui 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;
}

Answer 4

自己定义一种风格，如下所示：

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

然后在调用.button（）时使用它，就像这样：

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

这假设您的自定义图标位于CSS下方的图像文件夹中...与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); 
}

所以在你的风格中你只是覆盖背景图像，如果需要改变宽度，高度等。

jQueryUI按钮：如何更改Button-Icon＆＃39; color＆＃39;

4 个答案: