asp.net - 将 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

根据您设置的示例代码 <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