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

24 votes260 views3 answers
Bootstrap Alerts Additional content
Html
0 vote231 views1 answer
Icons burger css font awesome
Html
18 votes240 views2 answers
How to add script in html head
Html
-2 votes236 views2 answers
Making image responsive
Html
0 vote236 views1 answer
Pre-fill the input with the default domain
Html
0 vote221 views1 answer
Html repeating video
Html
1 vote262 views2 answers
Get checkbox value in div TAG
Html
42 votes234 views4 answers
Breaks html
Html
1 vote265 views1 answer
How to add double space in html
Html
1 vote255 views1 answer
Sort table in html
Html