How to add an icon to an input type text field in HTML/CSS?

Question

I would like to replicate Google's front-end for practice purposes. I am struggling with including the 'search icon' in the Google search bar.

On other articles, I read about the background-image property, which I have included. However, my image is quite big in pixels. I have included an addition '5px' to emphasize that the icon should be smaller. However, I can't see the icon when I do this.

Could someone explain how I would go about doing this?

input[type=text] {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png) 5px;
  outline: none;
  width: 40%;
  padding: 8px 25px;
  border: 1px solid #DDD;
  border-radius: 25px;
  margin: 20px;
}

<div>
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link" href="image.html">Image Search</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="advanced.html">Advanced Search</a>
    </li>
  </ul>
</div>
<container>
  <div class="image-box">
    <center>
      <img alt="Google" height="92" src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png">
    </center>
  </div>
  <div>
    <center>
      <form action="https://google.com/search">
        <input type="text" name="q"><br>
        <input type="submit" value="Google Search">
        <input type="submit" value="I'm Feeling Lucky">
      </form>
    </center>
  </div>
</container>

Thanks in advance!

Does this answer your question? [Put icon inside input element in a form](https://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form) — Adam Strauss, Nov 03 '20 at 08:16

corn on the cob · Accepted Answer · 2020-11-03T08:09:15.083

Adding a background size like this doesn't work. The reason why is that the background-image property does not support putting background sizes. It just supports links to images, and gradients themselves.

However, there's an entire property waiting there for you - it's called background-size.

You basically specify the width and the height of the background size in this property. You can also use the cover and contain keywords here also.

So in your case you need:

background-size: 5px 5px;

However, you might notice a problem - there are lots of search icons. I would expect that you don't want this to happen. Just add this:

background-repeat: no-repeat;

You can also position it like this (adjust to your liking)

background-position: 10% 10%;

If you want to put all this in the same property, you could look up the shorthand background property for all these values, but some would argue this makes it much harder to read the code.

input[type=text] { 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png); 
    background-size: 5px 5px;
    background-repeat: no-repeat;
    background-position: 10% 10%;
    outline: none; 
    width: 40%; 
    padding: 8px 25px; 
    border: 1px solid #DDD; 
    border-radius: 25px; 
    margin: 20px; 
}

Thanks a lot for also explaining what each of the properties does and why we add them. Appreciate it! After I chose the appropriate positions, I run into the problem that my text cursor was intersecting with the icon. I increased the padding to 50px, but do you happen to know if there is an easier/simpler way of doing this? I don't want to pad the right side of the input field. Also, would like to vertically align the text and icon. Is there an easy way for achieving this? — user13717018, Nov 03 '20 at 09:12
Hello @user13717018! I think the best way to sort this out would be to use absolute positioning, but of course that can get annoying. For the second issue, you should use flexbox. If you look it up you will find many tutorials online. — corn on the cob, Nov 03 '20 at 15:22

score 1 · Answer 2 · answered Nov 03 '20 at 08:05

added background-size, background-position & background-repeat

input[type=text] { 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png); 
        background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png);
    background-size: 20px;
    outline: none;
    width: 40%;
    padding: 8px 25px 8px 40px;
    border: 1px solid #DDD;
    border-radius: 25px;
    margin: 20px;
    background-repeat: no-repeat;
    background-position: 10px;
}

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>Search!</title>
        <link rel = "stylesheet" href = "style.css">
        <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    <body>
        <div>
            <ul class = "nav justify-content-end">
                <li class = "nav-item">
                    <a class= "nav-link" href = "image.html">Image Search</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link" href = "advanced.html">Advanced Search</a>
                </li>
            </ul>
        </div>
        <container>
            <div class = "image-box">
                <center>
                    <img alt = "Google" height = "92" src = "https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png"> 
                </center>
            </div>
            <div>
                <center>
                <form action = "https://google.com/search">
                    <input type = "text" name = "q"><br>
                    <input type = "submit" value = "Google Search">
                    <input type = "submit" value = "I'm Feeling Lucky">
                </form>
                </center>
            </div>  
        </container>
    </body>
</html>

Aib Syed · Answer 3 · 2020-11-03T08:08:55.523

I've made some adjustments to your code.

Here are the added properties that you can adjust to your liking:

EDIT: Linked docs for added CSS properties.

background-repeat: no-repeat;

background-size: 12px;

background-position:3% 50%;

Run the snippet below and let me know if this works for you.

input[type=text] {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position:3% 50%;
    outline: none;
    width: 40%;
    padding: 8px 25px;
    border: 1px solid #DDD;
    border-radius: 25px;
    margin: 20px;
}

<div>
            <ul class = "nav justify-content-end">
                <li class = "nav-item">
                    <a class= "nav-link" href = "image.html">Image Search</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link" href = "advanced.html">Advanced Search</a>
                </li>
            </ul>
        </div>
        <container>
            <div class = "image-box">
                <center>
                    <img alt = "Google" height = "92" src = "https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png"> 
                </center>
            </div>
            <div>
                <center>
                <form action = "https://google.com/search">
                    <input type = "text" name = "q"><br>
                    <input type = "submit" value = "Google Search">
                    <input type = "submit" value = "I'm Feeling Lucky">
                </form>
                </center>
            </div>  
        </container>

How to add an icon to an input type text field in HTML/CSS?

3 Answers3