How to align a search icon inside a search box

Question

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>

mabye switching your styled textbox for a div, then styling it like you did with textbox, adding the image inside and next to it the textbox would be an option? — Dev, Sep 17 '21 at 13:44

score 0 · Answer 1 · answered Sep 17 '21 at 13:44

0

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.

answered Sep 17 '21 at 13:44

Harry Potter

137
7

You'd need to position the _input_ relatively, and you wouldn't want to apply absolute position to _all_ images. You should copy the snippet down here and edit to show your solution. – isherwood Sep 17 '21 at 13:46
Don't you want to use position: absolute ? – Harry Potter Sep 17 '21 at 13:54
I see. You are super. – Harry Potter Sep 17 '21 at 13:59
1

And then If you want to not use absolute, I can help you. – Harry Potter Sep 17 '21 at 13:59
You can align input and img tag inside Div – Harry Potter Sep 17 '21 at 14:00

overflowhidden · Answer 2 · 2021-09-17T13:54:46.377

0

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.

edited Sep 17 '21 at 13:54

answered Sep 17 '21 at 13:45

overflowhidden

46
4

score 0 · Accepted Answer · answered Sep 17 '21 at 13:47

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>

Carol Skelly · Answer 4 · 2021-09-17T14:00:48.607

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>

How to align a search icon inside a search box

4 Answers4