Textbox with background image using CSS

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;
}

Now, we simply assign our input tag to the CSS class “searchBox”:

Get our Articles via Email. Enter your email address.

You may also like...

9 Comments

  1. Pramod says:

    Hi Please check your code on ie7 and ie8 .. and do input the long text values …

  2. zakhona says:

    pls can u help me how to put image dot in the textbox when you use asp.net with capture

  3. tejas says:

    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….

  4. bluechip says:

    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.

  5. David says:

    Use Text-Indent instead of Padding-left

  6. /*style.css*/
    .txtUserProfile {
    	background-image: url("../images/UpdateGamestatusBG.png");
    	background-repeat: no-repeat;
    	width: 228px;
    	height: 23px;
    }
    
    .txtUserProfile input {
    	border: none;
    	padding-left: 5px;
    	font-size: 11px;
    	width: 228px;
    	height: 23px;
    	background: transparent;
    	color: #949494;
    	font-weight: bold;
    	height: 23px;
    }
    
    .thesearchimage {
    	background-image: url(../images/SearchIcon_Img.png);
    	background-position: right;
    	background-repeat: no-repeat;
    }
    
    

    /*profile.html*/

    /* html component */

    • udaykiran says:

      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

  7. Harry Suppal says:

    Hi Viral,
    Nice post. Is there a way to add some animation to the textbutton as well. Like some animation within the textbox?
    Thanks!

  8. shahid says:

    how can we insert background-color with icon in textbox in html

Leave a Reply

Your email address will not be published. Required fields are marked *