Web Development

Create An Icon Input Element Using HTML And CSS

There is a lot of usages we see for input elements with an icon before it. In this article, I’m going to create an HTML Input with an icon before it. But before going to code let me show you the final output first.

The following is what we want to achieve.

Create An Icon Input Element Using HTML And CSS

First, create a container div for the input box. I’ll write a class named icon-input-container which would contain the textbox and the icon element.

Now, I’ll style the input element by creating a CSS class for it. Check class named icon-input.

It’s time to create a container for the icon beside the textbox. I’ll try to create the container so that it goes just before the element. I have created a class and named it icon-container.

Inside the icon container, I’m going to put the icons. You can change the icon and add the image URL according to your requirements to match your HTML input element. Have a look at class icon-lock which is an icon for a password box for my case.

You can find the whole example for the HTML input element in Github Repo.

Read: How Async/Await Works In JavaScript