Full Stack Developer

How to create Icon input element using html and css

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:

icon input

Follow GitHub for the complete code repository.

ME input A profound honest Full Stack Developer with a passion for creating delicate solutions in the least amount of time, with more than seven years of experience in the Web Application Development. Implemented complex user stories that make the business count on more conversion and grow with it. icon Started career with ASP.NET but eventually revamped skills with JavaScript, ReactJs, NodeJs and Ruby on Rails. SVG Throughout my career, I have contributed to the businesses who have a positive impact on society through my active and innovative contributions to the growth of the organisation. While being an independently motivated engineer, I appreciate the collective efforts and collaborative productivity within the team environment. I am open-minded and focused on learning new technologies which have direct impacts on the betterment of human lives. ICON INPUT
Share on:

Add Comment

  |     |  
Full Stack Developer

About me

A profound honest Full Stack Developer with a passion for creating delicate solutions in the least amount of time, with more than seven years of experience in the Web Application Development. Implemented complex user stories that make the business count on more conversion and grow with it.

Started career with ASP.NET but eventually revamped skills with JavaScript, ReactJs, NodeJs and Ruby on Rails.

Throughout my career, I have contributed to the businesses who have a positive impact on society through my active and innovative contributions to the growth of the organisation. While being an independently motivated engineer, I appreciate the collective efforts and collaborative productivity within the team environment. I am open-minded and focused on learning new technologies which have direct impacts on the betterment of human lives.