Question

I have the following CSS that I can apply to an HTML input tag.

#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;
}

And the HTML to which I apply it…

<div id="headerSearch" class="float">
  <input id="txtSearch" class="text left" type="text" />
  <input id="searchButton" class="submit right" type="submit" value="" />
</div>

It works wonderfully.

However, I want to use an ImageButton control instead of the input tag because I want the page submit behavior of the ImageButton (which occurs when you click on it and click event is raised, etc.), but I am not sure how to go about mixing CSS with the ImageButton. I tried something simple like

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

but what occurs is the image displays with a red X in a white box (the default image is missing icon) over top of it.

So, more succinctly, how do I mix elegant CSS with the .NET ImageButton?

Answer 1

In short I would not use the asp image button.

I would use your current html controls and then add some javascript to click a hidden asp:Button control when your submit input is clicked.

<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>

I don’t quite recall if that is the correct syntax to get the client id…