In this short article I will explain how to implement TextBox with Search Icon in ASP.Net as well as pure HTML.
The idea is to place a background image for the TextBox using CSS and then the CSS class can be applied to ASP.Net as well as HTML INPUT TextBoxes.
 
 
ASP.Net TextBox with Search Icon
To display Search Icon inside ASP.Net TextBox, you need to set CssClass property for the TextBox as search, which is the CSS class that applies background image to the TextBox.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .search
        {
            background: url(find.png) no-repeat;
            padding-left: 18px;
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server" CssClass="search"></asp:TextBox>
    </form>
</body>
</html>
 
 
HTML input TextBox with Search Icon
To display Search Icon inside HTML INPUT TextBox, you need to set class property for the TextBox as search, which is the CSS class that applies background image to the TextBox.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <style type="text/css">
        .search
        {
            background: url(find.png) no-repeat;
            padding-left: 18px;
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
<input type = "text" class = "search" />
</body>
</html>
 
TextBox with Search icon as background image for ASP.Net and HTML TextBoxes
 
 
Demo
View Demo
 
 
Downloads
Download Code