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.

dan · Accepted Answer · 2013-03-04 09:00:24Z

1

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

answered Mar 4, 2013 at 9:00

dan

2,0343 gold badges25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1466291 · Accepted Answer · 2013-03-01 10:20:55Z

0

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>

answered Mar 1, 2013 at 10:20

user1466291

1 Comment

dan Over a year ago

Thanks for the reply. I missed one more thing in my listing. Inside the same div there contains another span that shows a different icon but must be applied with ui-state-highlight (blue color pallet). If i re-color the given png i will loose this effect, don't I?

gangakvp · Accepted Answer · 2013-03-01 10:32:50Z

0

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.

answered Mar 1, 2013 at 10:32

gangakvp

833 bronze badges

2 Comments

dan Over a year ago

Thanks for the reply. Could you please verify the steps I followed. [Step 01] created a copy of ui-icons_454545_256x240.png as the same place as the jQuery UI icon maps are and rename it to custom.png [Step 02] created the class .ui-icon-custom in my site css [Step 03] $('#button').button() routine is called. After all this I still get the bluish icon. Have I missed anything? Thanks again.

dan Over a year ago

And does this solution overwrites the styles of ui-state-highlight which applied to the parent div only to this span? I have slightly changed my original question little later on :)

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related