All we need in order to create an input box like this is an image of a magnifying glass and some CSS code. This input box is simply created by adding a background image to the the input tag and a left padding so that the text doesn’t overlap the background image.
Download following image: This is an example of the CSS:
.searchBox{
background-image:url('images/magnifying-glass.gif');
background-repeat:no-repeat;
padding-left:20px;
}
Code language: CSS (css)
Now, we simply assign our input tag to the CSS class “searchBox”:
Hi Please check your code on ie7 and ie8 .. and do input the long text values …
pls can u help me how to put image dot in the textbox when you use asp.net with capture
MScaptcha is not working when i run my asp.net web on IIS7 server ……. what to do….? i hv given all kind of reference to .dll file….
Thanks you! Could you please help me this situation?
I want to put your CSS in style.css file and then using spring JSTL tags to include external script files or style sheets. First you should include the the taglib in JSP as follows.
Then I include extenal css file using,
<link href="” rel=”stylesheet” type=”text/css” media=”screen”>
But it doesn’t work.
Use Text-Indent instead of Padding-left
/*profile.html*/
/* html component */
use div component with class txtUserProfile in between those div component another div with class thesearchimage css class. Finally between those two components use HTML input component.
Example:
1st div start div class
2nd div start div class
input component
2nd div ends
1st div ends
Hi Viral,
Nice post. Is there a way to add some animation to the textbutton as well. Like some animation within the textbox?
Thanks!
how can we insert background-color with icon in textbox in html