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

7 votes306 views4 answers
New laravel
Html
0 vote303 views1 answer
Avoid textarea user input
Html
0 vote319 views1 answer
Travel blog “guest post”
Html
0 vote296 views1 answer
Modal behind html element
Html
0 vote286 views1 answer
Open html file in localhost
Html
2 votes335 views2 answers
Rick astley never gonna give you up
Html
74 votes332 views6 answers
Html links
Html
0 vote327 views1 answer
Render html helper list + prestashop 1.7
Html
0 vote315 views1 answer
Parcel npm developer dependency
Html
2 votes338 views2 answers
Autoclick button if refresh page html
Html