Bootstrap input border flashing when clicking away from altered input:focus - html

Question

I have a simple form with an input field where I created my own floating placeholder/label. I then wanted to change how the focus behave, removing shadow and alter the borders. Here is the code I have right now which is almost working:
.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/bootstrap#3.3.7/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>
All looks good when focusing on the element. However, when I unfocus there is a flash of black top border for some reason. Why is this happeneing?
I tried to remove the transition but it is still there. How can I make it transition back to the light grey color it was without the top border flashing black in between?

Answer 1

This is due to the border-top property on input.my-input:focus being set to none. Removing that and adjusting the negative margin on input:focus ~ .floating-label should fix it:
Edit: In response to OP's comment - changing the color of the border-top property will resolve the issue:
.paddings{
padding: 5rem;
}
input.my-input:focus {
box-shadow: none;
border: thin solid rgba(0, 100, 173, 0.5);
border-top: whitesmoke;
}
.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/bootstrap#3.3.7/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>