HOW TO CREATE ICON INPUT ELEMENT USING HTML AND CSS | Mushfiqur’s Blog

HOW TO CREATE ICON INPUT ELEMENT USING HTML AND CSS | Mushfiqur’s Blog

We are going to create a customized HTML input element with an icon before it using HTML and CSS.

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.

Code

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;
}

.icon-email {
  width: 15px;
  height: 15px;
  background: url("email.svg") no-repeat;
  background-size: contain;
}

.icon-lock {
  width: 15px;
  height: 15px;
  background: url("lock.svg") no-repeat;
  background-size: contain;
}

.icon-container {
  position: absolute;
  top: 8px;
  padding: 10px 0px 0px 10px;
  transition: 0.3s;
  color: #373737;
  border-right: 1px solid #E6E6E6;
  width: 23px;
  height: 23px;
}

Here is how the final output looks:

Follow GitHub for the complete code repository.