Customizing the search textbox

Posted on 2009-05-02
Last Modified: 2013-11-19
I have a textbox for searching the site and would like to put the magnifying glass, which by the time now appears beside it, within it like Telerik's website (
This is the code for search Textbox:
<asp:TextBox ID="txtSearch" runat="server" onFocus="if(this.value=='Search...')this.value='';"
            onBlur="if(this.value == '')this.value='Search...';" Text="&nbsp;&nbsp;Search..."
And one of or both of these codes for the magnifying glass, which appears beside the textbox:
<div id="SearchIcon" class="SearchIcon" onclick="document.getElementById('SearchChoices').style.display='block'">
            <asp:Image ID="downArrow" runat="server" ImageUrl="~/images/action.gif" />
<asp:LinkButton ID="cmdSearch" runat="server" CausesValidation="False"></asp:LinkButton>
This is a DotNetNuke site.
Question by:ihbemd6rb
    LVL 10

    Expert Comment

    I would use an ImageButton instead of a LinkButton.
    LVL 10

    Expert Comment

    In fact, if you look at Telerik site, the button is not INSIDE the textbox... it's just at the right of the textbox.  
    (Type AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA in the box, you will see what i mean)

    They probably use CssClass or Style to make it look like they want.

    Here's a Textbox with a strange background under the textbox...  you might give it a try.
    <asp:TextBox ID="UserName" runat="server"  style="font-size:larger; color:white; padding-top:13px; text-align:center;background-image:url(/Secure/images/obj_username.jpg);z-index:2; width:188px; height:45px; background-repeat:no-repeat" BackColor="Transparent" BorderWidth="0px" Height="45px" Width="188px"></asp:TextBox>

    Author Comment

    Hello, I know that it is a background image, I also have  such a background image, but it doesn't work on click! On Telerik's website the people click on this background image to search, and it works. But mine does nothing!
    LVL 10

    Accepted Solution

    As i said, use an ImageButton instead of a LinkButton like this:

        <asp:ImageButton ID="ImageButton1" runat="server" OnClick="CodeBehindFunction"  />

    Of course, CodeBehindFunction, is your search code...

    Author Closing Comment

    Good idea! Thanks!

    Featured Post

    Live: Real-Time Solutions, Start Here

    Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

    Join & Write a Comment

    Thoughout my experience working on eCommerce web applications I have seen applications succumbing to increased user demand and throughput. With increased loads the response times started to spike, which leads to user frustration and lost sales. I ha…
    What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now