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; }
Code language: CSS (css)
Now, we simply assign our input tag to the CSS class “searchBox”:

View Comments

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

  • [code language="css"]
    /*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;
    }

    [/code]
    /*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!

Share
Published by
Viral Patel
Tags: CSS How-To

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago