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

时间:2014-12-01 12:30:51

标签: css asp.net

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

我已经定义了以下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();
});

});

1 个答案:

答案 0 :(得分:0)

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

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

CSS

.removeCorners {
    /* your custom style */
}