In the recent “web 2.0” sites, we see cool search boxes, with the search button appearing “inside” the text box. How’d they do that? Microsoft’s bing search also has this feature. A snapshot of the bing search box looks like this:

It’s actually quite simple to do, with a bit of css. First, let’s look at the markup:

[code:html]

<div class='search-box'>

    <asp:TextBox runat="server" ID='txt1'></asp:TextBox>

    <asp:Button runat="server" ID='btn1' Text='Search' />

</div>

And let’s now see the associated css:

[code:html]

<style type="text/css">

    .search-box input

    {

        border:none;

    }

    .search-box

    {

        display:inline;

        border:1px solid #000000;

    }

</style>

And you can see the result:

Sure…it’s not exactly the same, but you can play around with it, change the css here and there, use an ImageButton or whatever to make it look exactly like you want. The idea is basically the same.

Hope that helps.

Tags: ASP.NET, HTML