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

Posted by Ksuresh under ASP.NET category on 9/11/2012 | Points: 40 | Views : 2410

Post Code |

Search Codes |

Code Home

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.

.searchBox
{
    font-size: 13px;
    color: #000000;
    font-family: Arial,Tahoma, Verdana;
    text-align:left;
    font-weight: normal;
    background-image:url(../Images/smallsearchsymbol.JPG); 
    background-repeat:no-repeat;
    background-position:right;     
    border: 1px solid black;
    padding-right: 25px;
    float:left;  
}

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
Suresh

Alert Moderator