Html input with icon right

<div class="input-icon-wrap">
  <span class="input-icon">
    <span class="fa fa-user"></span>
      
    </span>
  <input type="text" class="input-with-icon" id="form-name">
</div>  	


// css
.input-icon-wrap {
  border: 1px solid #ddd;    
  display: flex;
  flex-direction: row;
}

.input-icon {
  background: #ddd;
}

.input-with-icon {
  border: none;
  flex: 1;
}

.input-icon, .input-with-icon {
  padding: 10px;
}

Source: codepen.io

Similar codes

0 vote220 views1 answer
Html href click not refresh
Html
0 vote151 views1 answer
Jsp variable in html
Html
2 votes216 views1 answer
How do you make a link in html5
Html
0 vote199 views1 answer
How to display gif when button clicked html css
Html
0 vote216 views1 answer
Webpack Hot replace module unsafe-inline
Html
1 vote192 views2 answers
How to add preloader in html page
Html
1 vote235 views3 answers
Html how to make space between words
Html
7 votes503 views2 answers
Tab image code
Html
0 vote197 views1 answer
How to set up html basic workspace
Html
10 votes211 views1 answer
Input type="file" and display image
Html