将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混合使用？

已邀请:

3 个回复

体悉

简而言之，我不会使用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验证。

要回复问题请先登录或注册

将CSS应用于.NET ImageButton

3 个回复

发起人

css

imagebutton

asp.net

问题状态

将CSS应用于.NET ImageButton

与内容相关的链接

3 个回复

发起人

css

imagebutton

asp.net

问题状态