HOW TO CREATE ICON INPUT ELEMENT USING HTML AND CSS

#html #css #design #webdev

There is a lot of time we need to customize input control. In this post, we are going to create a customized input-element with an icon before it. We will do it using only HTML and CSS.

We are going to use a div element as a container for the input element. Inside our container, we will put the input element and our icon container. The icon container is also a div element. Here is our HTML:

<div class="icon-input-container">
    <input class="icon-input" type="text" placeholder="Email">
    <div class="icon-container">
      <div class="icon-email"></div>
    </div>
</div>

For the icon, we are going to use an SVG. You can get a lot of wonderful icons from FlatIcon for various purposes for free in SVG, PNG and AI format. We have used that SVG as div background. Here is the CSS:

.icon-input {
  width: 100%;
  border: 1px solid #E6E6E6;
  margin: 8px 0;
  outline: none;
  padding: 8px 0px 8px 35px;
  transition: 0.3s;
}

.icon-input-container {
  position: relative;
}