Question

HTML标记如下：

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

我使用以下代码创建此按钮作为jquery ui按钮：

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

调用此函数会产生以下标记：

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

这很好用。结果是一个按钮，其填充为.4em 1em;，如jquery的CSS中所定义。（.ui-button-text-only .ui-button-text）

我在这个页面上有几个按钮，我喜欢这个填充大多数。但是，对于这一个按钮，我特别想要没有填充。我意识到我可以只更改.ui-button-text-only和.ui-button-text的CSS，但这会使用这种风格搞砸其他按钮，我喜欢它们的方式。

所以我想知道是否有任何方法可以覆盖此css 只需一个按钮。我看了jquery's button docs，但它似乎不允许使用按钮选项传递特定的CSS。

提前感谢您的帮助！

Answer 1

您可以在创建按钮后在按钮中添加新类。

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

Answer 2

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

添加范围标记

#Refresh span {
    padding:0 !important;
}

jquery ui按钮填充覆盖

2 个答案: