jQueryUI Button: How to change Button-Icon 'color'

Question

I have placed a html button inside a div in the following manner:

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

Since the div is assigned with the class:ui-state-highlight the button's icon color has changed to blue.

Is there is a way I can revert the icon color back to: default (black) color?

And further, I need the icon in the third span to have the effect (color) of ui-state-highlight.

I'v tried applying ui-state-default, just to the first span (containing the icon), but that did not give the expected effect.

Answer 1

Re-writing the ui-state-highlight class applied for the containers (such as divs and spans) fix the problem.

Answer 2

You can add new style, where will be path to images with default (black) icon color (http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_2e83ff_256x240.png)

Edit:

Or change outer div class to 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

Define a style yourself, like this:

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

Then just use it when calling .button(), like this:

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

This assumes that your custom icon is in the images folder beneath your CSS...the same place as the jQuery UI icon map typically is. When the icon's created it gets a class like this: class="ui-icon ui-icon-custom", and that ui-icon class looks like this (maybe a different image, depending on theme):

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

So in your style you're just overriding that background-image, if needed change the width, height, etc.