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 vote182 views1 answer
Livewire wire:targer multiple target
Html
0 vote236 views1 answer
Adding a button to a Markdown
Html
0 vote174 views1 answer
Html content editable no newline
Html
1 vote329 views1 answer
Types of passwords html
Html
0 vote171 views1 answer
Html page to screenshot
Html
-1 vote202 views1 answer
Bootstrap align-self: center;
Html
0 vote161 views1 answer
Bootstrap Navbar Tutorial style custom JS and CSS
Html
1 vote173 views1 answer
Caption in hhtml
Html
0 vote185 views1 answer
How to call html.action in asp.net core
Html
0 vote171 views1 answer
Html how to nest 2 tags
Html