2

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!

4

2 回答 2

3

创建后，您可以在按钮内的跨度中添加一个新类。

$("#Refresh").button();
$("#Refresh").find('span.ui-button-text').addClass('yourClass');
于 2012-06-07T15:47:01.537 回答
2

您可以简单地使用 CSS 对其进行样式设置。为了确保它没有被覆盖添加'！important'

添加跨度标签

#Refresh span {
    padding:0 !important;
}
于 2012-06-07T15:44:58.340 回答