adding a search icon on search bar-CodePudding

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

CodePudding user response：

Example:

<div >
     <input type="text">
         <div >
         <i> "icon url fontawesome or img"</i>
       </div>
 </div>

CodePudding user response：

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>