Add image inside search box? - html

Question

How can I add an image inside this search box? I'd like the image to be positioned inside and to the left of the palceholder text...
Here is the fiddle
HTML:
<div class="searchbar">
<h1>Welcome...</h1>
<div id="sb-search" class="sb-search">
<div class="search-wrapper">
<input class="search-input" placeholder="Search..." type="text" value="" name="search" id="search"/>
<img class="search-pic"src="img/search-icon.png"/>
</div>
</div>
</div>
thanks

Answer 1

Add this to your CSS which will position the image inside the input field.
.search-wrapper {
position: relative;
}
.search-wrapper img {
position: absolute;
top: 0px;
left: 0px;
}
Then you just need to use padding and change the top and left values to move everything about so it fits nicely and nothing is overlapped.
You might also need to set a width and height to the image so it's not too big for the input field.

Answer 2

You can solve it like this:
#mixin searchbar-font {}
#mixin searchbar-styles {
border: none;
outline: none;
color: $header-bg-color;
padding: 20px 65px 20px 20px;
background: transparent;
flex:1;
}
#mixin search-bar-input {
border: none;
outline: none;
}
.search-input {
border: none;
outline: none;
color: $header-bg-color;
padding: 20px 65px 20px 20px;
background: transparent;
flex:1;
}
.search-wrapper {
position: relative;
background: white;
display: flex;
align-items: center;
.search-input {
#include searchbar-font;
#include searchbar-styles;
}
.search-submit {
#include search-bar-input;
}
}
<div class="searchbar">
<h1>Welcome...</h1>
<div id="sb-search" class="sb-search">
<div class="search-wrapper">
<img class="search-pic" src="img/search-icon.png" />
<input class="search-input" placeholder="Search..." type="text" value="" name="search" id="search" />
</div>
</div>
</div>
Attached Fiddle

Answer 3

Technically you need to set your parent tag's position to relative, then set the image inside's position to absolute. Then you can overlay the image on your Input field. Also, one more thing to remember is you might want to set you z-index. Just in case, your image does not get behind of your input field. Make sure you are giving enough space to for your image by setting the input's padding left to somewhere around your image's width.
.search-wrapper{
.search-input{
padding-left: {image.width}px;
}
img{
position:absolute; left:0; top:0;
}
}
This should do the work.

Answer 4

<div class="search-container">
<input type="text" placeholder="Search...">
<img src="search-icon.png" alt="search icon">
</div>a
.search-container {
display: flex;
align-items: center;
position: relative;
}
input[type="text"] {
border: 1px solid gray;
border-radius: 20px;
padding: 10px 40px 10px 20px;
font-size: 16px;
width: 500px;
}
img {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 20px;
}
<div class="search-container">
<input type="text" placeholder="Search...">
<img src="search-icon.png" alt="search icon">
</div>
.search-container {
display: flex;
align-items: center;
position: relative;
}
input[type="text"] {
border: 1px solid gray;
border-radius: 20px;
padding: 10px 40px 10px 20px;
font-size: 16px;
width: 500px;
}
img {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 20px;
}