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 vote102 views1 answer
Add title attribute
Html
1 vote125 views1 answer
Empty link
Html
0 vote111 views1 answer
How to take space in fontawesome unicode
Html
43 votes98 views6 answers
Html new line
Html
-1 vote95 views1 answer
How to edit colours in background html
Html
0 vote102 views1 answer
Elementor text control
Html
1 vote98 views1 answer
How to set an element affected by tab
Html
0 vote118 views1 answer
Typo3 typoscript page uid to body tag
Html
8 votes109 views1 answer
Remove space table html
Html
17 votes100 views2 answers
Dropdown in html
Html