I'm struggling to place an icon inside an input tag, but it always appears at the bottom of the input. I initially tried using Bootstrap, but I ended up resorting to custom styles for this specific issue.
Here's the HTML code:
<div class="form-group">
<label for="password" class="text-secondary">Password</label>
<div class="input-group">
<input id="password" type="password" class="form-login @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
<div class="input-group-append">
<span class="input-group-text" onclick="password_show_hide();">
<i class="fas fa-eye" id="show_eye"></i>
<i class="fas fa-eye-slash d-none" id="hide_eye"></i>
</span>
</div>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
And here's the corresponding CSS:
.form-login{
display: block;
width:100%;
font-size: 1rem;
font-weight: 400;
line-height:1.5;
border-color: #009DA9 !important;
border-style: solid !important;
border-width: 0 0 1px 0 !important;
padding: 0px !important;
color:black;
height: auto;
border-radius: 0;
background-color: #fff;
background-clip: padding-box;
}
.form-login:focus{
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: none;
}
This is how it currently looks:
This is how I want it to look: https://i.sstatic.net/jP5SG.png