jquery ui button padding override

Question

HTML markup is as follows:

<button id="Refresh"><img src="refresh.png" /></button>

I am creating this button as a jquery ui button with the following code:

$("#Refresh").button();

Calling this function produces the following markup:

<button id="Refresh" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
    <span class="ui-button-text">
        <img src="refresh.png">
    </span>
</button>

This works fine. The result is a button with padding of .4em 1em; as defined in jquery's CSS. (.ui-button-text-only .ui-button-text)

I have several buttons on this page, and I like this padding for most of them. However, for this one button in particular I'd like to have no padding. I realize I could just change the CSS for .ui-button-text-only and .ui-button-text but that would screw up the other buttons using this style, and I like them the way they are.

So I'm wondering if there's any way to override this css just for one button. I took a look at jquery's button docs but it doesn't appear to allow passing of specific CSS in with the button options.

Thanks in advance for the help!

Answer 1

You can just add a new class to the span within the button after it is created.

$("#Refresh").button();
$("#Refresh").find('span.ui-button-text').addClass('yourClass');

Answer 2

You can simply style it using CSS. To make sure it's not overridden add '!important'

Add the span tag

#Refresh span {
    padding:0 !important;
}