How to put a image inside of a input box?

#1

So how would i go about, for instance, put a magnifying glass search icon into a form input text box?

A example would be google search and how they put the “search by voice” icon inside of their search box.

I would post my codepen or code but i wont and hear is why. First of all, every answer on code forums i see is way too specific to the question asked. People never can provide a general answer that works with everyone, and just take your codepen code, slightly change It to work, then give it to you so it only works for you… No one with the same question is even able to use your answer to help themselves because of this. I have seen 5 forum posts on the same topic sometimes because no one can provide a general answer to a simple question.

#2

You could try an overlapping absolutely positioned div that gets dislay:none when clicked, but that might be complicated.

1 Like
#3

I’m very new to coding, but I’ve had a fiddle about and maybe this could work? Apologies if it doesn’t or if you’ve tried this before, but if it does work then great!

Try putting the Unicode (?) next to the text you want in the search box or on its own, like the examples below. Would that work at all?

< input type=“text” placeholder="&#x1F50D search" required></ input>

< input type=“text” placeholder="&#x1F50D" required></ input>

Just a quick reminder to delete the space between the < and input and </ and input.

1 Like
#4

Just plop it in as a child or a sibling then move its position around with CSS. When it comes to sizing and positioning you can treat images like any other HTML element.

2 Likes
#5

Thanks for the suggestions. For simplistic reasons, ill just move it around with margin.

Edit: feel stupid over myself for forgetting to add bootstrap 4 and spending a hour banging my head on the wall (figuratively) about why nothing works.

1 Like