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

20 votes167 views3 answers
Bootstrap navbar-nav
Html
70 votes152 views4 answers
Html form
Html
3 votes151 views1 answer
Difference between name and id html
Html
1 vote151 views3 answers
Input hidden
Html
1 vote121 views2 answers
Html tab character
Html
0 vote152 views1 answer
Static html require a role
Html
4 votes173 views1 answer
How to insert degree symbol in html
Html
21 votes155 views6 answers
Html text box
Html
1 vote143 views1 answer
<h1>
Html
0 vote153 views1 answer
How to edit data in html table using jquery
Html