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

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/[email protected]/dist/css/bootstrap.min.css">
<div >
  <div >
    <div>
      <input  type="text"> 
      <span >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?

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css">
<div >
  <div >
    <div>
      <input  type="text"> 
      <span >Search</span>
    </div>
  </div>
</div>