I've created a form with different input controls structured like this:
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Email" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<small>
<span asp-validation-for="Email" class="text-danger"></span>
</small>
</div>
I've also written a SCSS file to adjust the border width when the input is active or in focus:
.form-control:focus,
.form-control:focus:active {
border-width: $input-focus-width !important;
}
However, the output I'm seeing is not as expected:
https://i.sstatic.net/GEJqB.png
Is there a way to specify the border width of the input-group-text element when the input control is active?