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

5 votes486 views2 answers
Disable a tag
Html
0 vote241 views2 answers
DOCtype
Html
1 vote270 views4 answers
Ex
Html
5 votes248 views2 answers
How to make radio buttons unselectable
Html
0 vote250 views2 answers
Make text vertical align middle in table bootstrap
Html
0 vote258 views1 answer
Question 04 => No
Html
0 vote239 views1 answer
Favicon text/html / Redirect uses bandwith
Html
1 vote235 views1 answer
Html yuan symbol
Html
2 votes235 views1 answer
Html inbed youtube
Html
-1 vote248 views1 answer
Select option with icon bootstrap
Html