css - jquery ui button padding override -
html markup follows:
<button id="refresh"><img src="refresh.png" /></button>
i creating button jquery ui button following code:
$("#refresh").button();
calling function produces 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. result button padding of .4em 1em;
defined in jquery's css. (.ui-button-text-only .ui-button-text
)
i have several buttons on page, , padding of them. however, 1 button in particular i'd have no padding. realize change css .ui-button-text-only
, .ui-button-text
screw other buttons using style, , them way are.
so i'm wondering if there's way override css just 1 button. took @ jquery's button docs doesn't appear allow passing of specific css in button options.
thanks in advance help!
you can add new class span within button after created.
$("#refresh").button(); $("#refresh").find('span.ui-button-text').addclass('yourclass');
Comments
Post a Comment