In my form, I have implemented a custom floating placeholder/label for an input field. I wanted to customize the focus behavior by removing shadow and modifying the borders. The current code is almost working as intended:
.paddings{
padding: 5rem;
}
input.my-input:focus{
box-shadow: none;
border: thin solid rgba(0, 100, 173, 0.5);
border-top: none;
}
.floating-label{
color: rgb(80 80 80);
pointer-events: none;
position: absolute;
left: 2.5rem;
top: 0.5rem;
transition: 0.2s ease all;
}
input:focus ~ .floating-label{
color: rgb(40 40 40);
font-size: 0.85rem;
top: -0.65rem;
left: 2rem;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45272a2a31363137243505766b766b72">[email protected]</a>/dist/css/bootstrap.min.css">
<div class="row paddings">
<div class="col-md-12">
<div>
<input class="form-control my-input" type="text">
<span class="floating-label">Search</span>
</div>
</div>
</div>While everything works well when focusing on the element, there is a sudden flash of black top border when unfocusing. This unexpected behavior is perplexing me.
I attempted to eliminate the transition effect but it persists. How can I smoothly transition back to the original light grey color without the annoying black border flashing in between?