问题描述
|
我有以下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验证。