adding a search icon inside search bar

August 23, 2022

I have actually been doing some research on adding a search bar but I also decided to add a search icon(magnifying glass)to the search bar and I got the result below but I am not really clear with number 3 and 4 please can someone help me out because I cant really find similar questions that fit my description exactly. this is my current code: <input id="search" type="search" placeholder= "search your products here"

.1Create the index. html with its basic structure.
.2 Add the input box inside the tag.
.3 Download a search icon.
.4 Step 4: Add a div with the image icon inside

>Solution :

This guide says to create a div:

<div style="background: #ddd; display: inline-flex; height: 32px;"></div>

Then add an input inside:

<div style="background: #ddd; display: inline-flex; height: 32px;">
  <input id="search" type="search" placeholder= "search your products here">
</div>

Then get an image, I’ll use https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Search_Icon.svg/750px-Search_Icon.svg.png

And add an img or a div with background-image into the div.

<div style="background: #ddd; display: inline-flex; height: 32px;">
  <input id="search" type="search" placeholder="search your products here">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Search_Icon.svg/750px-Search_Icon.svg.png" style="cursor: pointer; height: 100%;" onclick="alert('search: ' + document.querySelector('#search').value);">
</div>