How to put an icon inside an input element in a form with HTML?

Spread the love

Sometimes, we want to put an icon inside an input element in a form with HTML.

In this article, we’ll look at how to put an icon inside an input element in a form with HTML.

How to put an icon inside an input element in a form with HTML?

To put an icon inside an input element in a form with HTML, we can add an image beside a borderless input.

For instance, we write

<div style="border: 1px solid #DDD;">
  <img src="icon.png" />
  <input style="border: none;" />
</div>

to add a div with a border.

Then we put an img element and an input side by side.

We remove the border with border: none;.

Conclusion

To put an icon inside an input element in a form with HTML, we can add an image beside a borderless input.

Leave a Reply

Your email address will not be published. Required fields are marked *