将 CSS 应用到 .NET ImageButton

Question

我有以下 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 控件而不是输入标记，因为我想要 ImageButton 的页面提交行为（当您单击它并引发单击事件等时发生），但我不确定如何进行关于将 CSS 与 ImageButton 混合使用。我尝试了类似的简单操作

<asp:ImageButton ID="ibtnSrch" runat="server" CssClass="searchBtn" onclick="ibtnSrch_Click" AlternateText="Search" />

，但发生的情况是图像在其上方的白色框中显示有一个红色 X（默认图像缺少图标）。

那么，更简洁地说，如何将优雅的 CSS 与 .NET ImageButton 混合在一起？

Answer 1

根据示例代码，您已将 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;
}

---

， 渲染为

因为该控件是一个没有图像源的图像输入，这就是为什么你会得到一个红色的 x

Answer 2

如果您将 searchButton 样式更改为一个类，那么您只需使用

<asp:Button ID="ibtnSrch" runat="server" 
            CssClass="submit right searchButton" OnClick="ibtnSrch_Click" />

您就可以将该按钮放在单独的 ValidationGroup 或设置 CausesValidation="false"。

如果您想将其全部保留在客户端并在 JavaScript 中重定向到搜索页面，但也想利用您在控件上设置的 ASP.NET 验证，则可以使用 客户端 ASP.NET 验证。

Answer 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 的正确语法......