adding a search icon inside 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：

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>

CodePudding user response：

Example:

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

CodePudding user response：

So, what you need to do is :

Create a Div Containter in which you will store your Search Bar and Icon:

<div >

then you need to add an "input" tag which will be the search bar where people will search:

      <input type="search" id="searchbar" placeholder="search your products here">

(You can add a class to this for editing it in CSS with colors/width/height etc. with - - you can insert this before the ">" at the end of the input command

Next you need a find an icon you like. If you go to google and search for the Search icon png, you will find many icons with no background so you need to add that into the code with :

<img src="fileInsideYourPc/nameofphoto.png" onclick="alert('search: '   document.querySelector('#search').value);">

The onclick command is to make the Icon clickable for your search bar. Again, you can add a and then call it inside your css and add to it "cursor:pointer" and some other sizing options.

Then you just close your div with </div> and in your css you add design settings to all of these objects calling their class name that you've put with: .searchbar{} or .searchIcon{}