How to align a search icon inside a search box [duplicate] - html

Question

This question already has answers here:
Put icon inside input element in a form
(21 answers)
Closed 1 year ago.
I would like to know how to align a search icon, within the text box, same as Google's search bar
Like this:
This is what i got, but idk How to do it:
I am trying to avoid using bootstrap or any library. I want to keep it vanilla as much as I can.
#search-bar {
width: 32%;
color: white;
border-radius: 24px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #2d2d2d;
height: 44px;
}
<form class="search-bar-form">
<input id="search-bar" type="text" href="#" />
<img src="https://via.placeholder.com/24" />
</form>

Answer 1

You can place the image as the background of the textbox:
#search-bar {
width: 32%;
color: white;
border-radius: 24px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #2d2d2d;
height: 44px;
background-image: url(https://via.placeholder.com/24);
background-position: 10px center;
background-repeat: no-repeat;
padding-left: 40px;
}
<form class="search-bar-form">
<input id="search-bar" type="text" value="text goes after the padding" />
</form>

Answer 2

You can use position: absolute.
Like this:
form {
position: relative;
}
img {
position: abosolute;
top: 10px;
right: 20px;
}
You should update top and right values.
This is only example.

Answer 3

Add some padding-left to the search bar, to move the text more to the right side.
Then add a class to the image and define it like that:
.mySearchIconImage {
position: absolute;
top: 10px;
left: 10px;
Also add position: relative to the form itself, to make sure the img isn't positioned outside of your form.

Answer 4

There are several ways. One way is with absolute position inside a relative position parent...
body {
margin: 0;
}
#search-bar {
width: 32%;
color: white;
border-radius: 24px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #2d2d2d;
height: 44px;
position: relative;
padding-left: 44px;
}
.search-icon {
position: absolute;
left: 0;
}
<form class="search-bar-form">
<input id="search-bar" type="text" href="#" />
<img src="https://img.icons8.com/material-outlined/50/000000/search.png" class="search-icon" />
</form>
Demo
Another way is using relative position and a negative margin. For this, put the img before the input in your markup.
#search-bar {
width: 32%;
color: white;
border-radius: 24px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #2d2d2d;
height: 44px;
padding-left: 44px;
}
.search-icon {
position: relative;
margin-right: -60px;
z-index: 1;
vertical-align: middle;
}
<form class="search-bar-form">
<img src="https://img.icons8.com/material-outlined/50/000000/search.png" class="search-icon" />
<input id="search-bar" type="text" href="#" />
</form>