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 vote184 views1 answer
RouterLinkActive in dropdown main text
Html
1 vote206 views2 answers
Do_action( 'wp_head' );
Html
1 vote237 views4 answers
V
Html
0 vote176 views1 answer
Add ruby title html erb icon
Html
8 votes171 views1 answer
Jquery load data
Html
26 votes167 views2 answers
Html make file input only images
Html
0 vote194 views1 answer
How to find the immediate parent in xpath
Html
0 vote189 views1 answer
Sell html templates
Html
15 votes171 views2 answers
Boootstrap
Html
0 vote243 views1 answer
Basefont tag in html
Html