如何在asp.net按钮上应用自定义jQuery UI按钮类

如何在asp.net按钮上应用自定义jQuery UI按钮类,jquery,html,css,asp.net,jquery-ui,Jquery,Html,Css,Asp.net,Jquery Ui,我一直在尝试在asp.net按钮上应用自定义的jquery ui css类,但我知道它是如何工作的 如果我使用css类和按钮控件(如所附图片(第一个按钮)就可以了。出于某些原因,我需要使用asp.net按钮,并希望它与按钮控件具有相同的外观 <button id="btnLogin2" type ="button" onserverclick ="btnLogin_Click" runat="server" aria-disabled="false" role="button"

我一直在尝试在asp.net按钮上应用自定义的jquery ui css类,但我知道它是如何工作的

如果我使用css类和按钮控件(如所附图片(第一个按钮)就可以了。出于某些原因,我需要使用asp.net按钮,并希望它与按钮控件具有相同的外观

    <button id="btnLogin2"  type ="button" onserverclick ="btnLogin_Click"  runat="server" aria-disabled="false" role="button" class="ui-button ui-widget ui-state-default cssbox-ui-corner-all cssbox-ui-corner-all:hover ui-button-text-icon-primary">
                  <span style="margin:-8px 94px" class="ui-button-icon-primary ui-icon cssbox-okbtn" ></span>
                  <span class="ui-button-text">Login</span>
    </button>
js脚本应用OK按钮类

    .cssbox-okbtn { 
        background-image: url('/images/icons/jquery_ui/ok.png') !important;     
    }

    .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;
    }
    $(function () {
        $("input:submit").button({
            icons: { primary: 'cssbox-okbtn' }
        }).hide().after('<button>').next().button({
            icons:
            {
                primary: 'cssbox-okbtn'
            },
            label: $("input:submit").val()

        });
$(函数(){
$(“输入:提交”)。按钮({
图标:{primary:'cssbox okbtn'}
}).hide().after(“”).next()按钮({
图标:
{
主要:“cssbox okbtn”
},
标签:$(“输入:提交”).val()
});
第二个是asp.net按钮

   <asp:Button ID="btnLogin" Text=" Login " runat="server" CSSClass="cssbox-ui-corner-all cssbox-ui-corner-all:hover ui-button-text-icon-primary ui-button-icon-primary ui-icon cssbox-okbtn" />

页面源

       <tr  style="height: 22px">
            <td align="center" colspan="1">
                <button onclick="__doPostBack('ctl00$ContentPlaceHolder1$btnLogin2','')" id="ctl00_ContentPlaceHolder1_btnLogin2" type="button" aria-disabled="false" role="button" class="ui-button ui-widget ui-state-default cssbox-ui-corner-all cssbox-ui-corner-all:hover ui-button-text-icon-primary">
                  <span style="margin:-8px 94px" class="ui-button-icon-primary ui-icon cssbox-okbtn" ></span>
                  <span class="ui-button-text">Login</span>
                </button>

                <br />


                <input type="submit" name="ctl00$ContentPlaceHolder1$btnLogin" value=" Login " id="ctl00_ContentPlaceHolder1_btnLogin" class="cssbox-ui-corner-all cssbox-ui-corner-all:hover ui-button-text-icon-primary ui-button-icon-primary ui-icon cssbox-okbtn" />

                </td>
        </tr>

登录


您是否检查了客户端的css?(在页面源代码中)是否与服务器相同。也许您需要使用客户端css属性。我在问题中添加了页面源代码。