I tried to create a material design search field using Bootstrap form input. While I was able to make it work, I noticed a small issue with the focus state. When I click inside the field, the underline animation runs smoothly. However, when I click outside of it, the animation seems to take two steps to play. Here is a code sample for better understanding (I downloaded Bootstrap locally using npm).
HTML:
<div class="container">
<div class="d-flex mt-5">
<i type="submit" class="fa fa-search"></i>
<input type="email" class="form-control" placeholder="Search" />
</div>
</div>
SCSS:
.d-flex {
align-items: center;
}
.form-control {
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #eee;
border-radius: 0;
padding: 0;
}
.form-control:focus {
box-shadow: none;
border-bottom: 2px solid #4dd1e1;
transition: border-color 0.2s linear;
backface-visibility: hidden;
}
i.fa-search {
margin-top: 0.3rem;
margin-right: 1rem;
}
How can I go about fixing this issue?