css - 如何为 Jquery UI 按钮定义自定义 css

Question

我在不同的页面上使用 JQuery UI 按钮并尝试删除某些页面上的 Angular 。

我已经定义了以下 css，它工作正常，但它会影响其他页面上的其他按钮。我只对所有网页使用一个样式表。

是否可以只影响那些在 cssbox 表中定义的按钮？

 <table class="cssbox" cellpadding="5" cellspacing="0" border="0" width="398px" style="height: 287px;margin:0 auto;">
    <tr><td>
    <asp:Button ID="btnLogin"  Text=" Login " runat="server" CssClass="ui-corner-all ui-corner-all hover"  />

   </td> </tr>
 </table>

.cssbox ui-corner-all { 
width:265px;
border-radius: 0px; 
background: none repeat scroll 0% 0% #1A7BC9;
background: linear-gradient(to bottom, #1A7BC9 0px, #1A7BC9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1A7BC9', endColorstr='#1A7BC9');/*For IE7-8-9*/ 
border: 1px solid #1A7BC9;
height: 35px;
font-size: 12px;
}

.cssbox ui-corner-all:hover { 
border-radius: 0px; 
background: none repeat scroll 0% 0% #9CC8F7;
color: #404040;
border: 1px solid #9CC8F7;
filter: none;
}

或者可以在 jquery 函数中完成，因为我在某些页面上使用以下函数在 jquery UI 按钮上添加自定义图标。有一个带有 jquery 的删除和添加功能，但它适用于类“cssbox”吗？我不想为不同的页面创建单独的 jquery 函数。

$(function () {
$("input:submit").button({
    icons: { primary: 'cssbox-okbtn' }
}).hide().after('<button>').next().button({
    icons:
    {
        primary: 'cssbox-okbtn'
    },
    label: $("input:submit").val()
}).click(function (event) {
    event.preventDefault();
    $(this).prev().click();
});

});

Answer 1

在你想要删除特定样式的 jquery ui 的页面中，将“removeCorners”类应用于按钮元素:

$('button').addClass('removeCorners');

CSS

.removeCorners {
    /* your custom style */
}