How to make the image appear in the last of the search box

Posted by Ksuresh under ASP.NET category on | Points: 40 | Views : 1674
From this Code Snippet we will learn how to make a image appear in last of search box or text box.

<input type="text" id="txtsearch" value="Search Box" class="searchBox" style="width: 220px; height: 20px;" onblur="if(this.value==' ') this.value = 'Search Box';" onfocus="if(this.value=='Search Box') this.value = ' ';" />

Above code contains a text box with id="txtsearch",width & height , CSS style class name searchBox its respected code shown below and onblur, onfocus events.

when cursor placed in to text box then onfocus event fires the value "Search Box" disappears, when cursor get out of text box then onblur event fires value "Search Box" appears in to text box.

font-size: 13px;
color: #000000;
font-family: Arial,Tahoma, Verdana;
font-weight: normal;
border: 1px solid black;
padding-right: 25px;

In above CSS style class name searchBox to appear image in last of search box we used properties background-image:url(../Images/smallsearchsymbol.JPG); background-repeat:no-repeat; background-position:right;

Hope this code snippet helps.

Thanks & Regards

Comments or Responses

Posted by: Samarmir on: 9/13/2012 Level:Starter | Status: [Member] | Points: 10
please provide picture of how it will look like.
Posted by: Ksuresh on: 9/14/2012 Level:Starter | Status: [Member] | Points: 10
Hi Samarmir,

Here there is no option to put or upload image.


Login to post response