How to create an HTML input box with search icon inside it?

We can make an interesting search input by styling it with css, by adding search icon like what we see in this image:

Here is HTML script, input tag with an id:

And this is CSS part:

Don’t forget to place your search.png icon file on your directory.

Do you like this post? Consider a donation 😀

Published by


Habibie is an Indonesian freelance frontend-backend web programmer and cross platform mobile app developer. He's also good at graphics design, video editing, visual effects and animation.

Leave a Reply

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