I am attempting to achieve the following:
- Creating 3 input elements in a row
- Each should have an icon to the left of it, perfectly centered.
- Each should also have a border-bottom that extends to include the icon.
Similar to the image shown below:
https://i.sstatic.net/GPWdk.png
However, with my current code, I am facing issues centering the icons and extending the border properly. Here is my code snippet:
input {
border: none;
width: 250px;
background-color: #393d49;
border-bottom: 1px solid #767D93;
padding: 10px;
}
form img {
width: 24px;
height: 24px;
}<form>
<img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
<input type="email" placeholder="E-Mail"><br>
<img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
<input type="password" placeholder="Password"><br>
<img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">
<input type="text" placeholder="Username"><br>
</form>