如何解决将CSS应用于.NET ImageButton
| 我有以下CSS可以应用于HTML输入标签。#headerSearch
{
width: 265px;
}
#headerSearch .text
{
width: 215px;
}
#headerSearch #searchButton
{
background: url(../images/searchButton.png) no-repeat 0 0;
width: 36px;
border: 1px solid #ccc;
margin: 0;
}
#headerSearch #searchButton:hover
{
background: url(../images/searchButton.png) no-repeat 0 -28px;
}
以及我应用它的HTML ...
<div id=\"headerSearch\" class=\"float\">
<input id=\"txtSearch\" class=\"text left\" type=\"text\" />
<input id=\"searchButton\" class=\"submit right\" type=\"submit\" value=\"\" />
</div>
效果很好。
但是,我想使用ImageButton控件而不是input标签,因为我希望ImageButton的页面提交行为(当您单击它并引发click事件等时发生),但是我不确定该怎么做关于将CSS与ImageButton混合使用。我尝试了一些简单的事情
<asp:ImageButton ID=\"ibtnSrch\" runat=\"server\" CssClass=\"searchBtn\" onclick=\"ibtnSrch_Click\" AlternateText=\"Search\" />
但是会出现图像显示在其顶部白框(默认图像缺少图标)中带有红色X的情况。
因此,更简洁地说,如何将优雅的CSS与.NET ImageButton混合使用?
解决方法
简而言之,我不会使用asp图像按钮。
我将使用您当前的html控件,然后在单击您的提交输入时添加一些JavaScript以单击一个隐藏的asp:Button控件。
<div id=\"headerSearch\" class=\"float\">
<input id=\"txtSearch\" class=\"text left\" type=\"text\" />
<input id=\"searchButton\" class=\"submit right\" type=\"submit\" value=\"\" onclick=\"<% hiddenSearch.ClientID %>.click();\" />
<asp:Button ID=\"hiddenSearch\" runat=\"server\" style=\"display:none;\" />
</div>
我不太记得这是否是获取客户端ID的正确语法...
,根据示例代码,您已将<asp:ImageButton />
CssClass设置为\"searchBtn\"
,但是.searchBtn
没有CSS
也许将此添加到您的CSS
.searchBtn {
background: url(../images/searchButton.png) no-repeat 0 0;
border: 1px solid #ccc;
margin: 0;
}
.searchBtn:hover {
background: url(../images/searchButton.png) no-repeat 0 -28px;
}
<asp:ImageButton />
降到<input type=\"image\" name=\"ibtnSrch\" id=\"ibtnSrch\" class=\"searchBtn\" src=\"\" alt=\"Search\" style=\"border-width:0px;\" />
由于控件是没有图像源的图像输入,因此您获得红色x
,如果您将searchButton
风格更改为课程,则可以只使用<asp:Button>
<asp:Button ID=\"ibtnSrch\" runat=\"server\"
CssClass=\"submit right searchButton\" OnClick=\"ibtnSrch_Click\" />
然后可以将该按钮放在单独的ValidationGroup中或设置set13ѭ。
如果要保留所有客户端内容,并使用JavaScript重定向到搜索页面,又想利用您在控件上设置的ASP.NET验证,则可以使用客户端ASP .NET验证。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。