Question

我有以下可以应用于HTML输入标记的CSS。

#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

Answer 2

如果您将searchButton样式更改为班级，则可以使用<asp:Button>

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

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

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

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

将CSS应用于.NET ImageButton

3 个答案: