我有一个简单的表单，有一个输入字段，我在其中创建了自己的浮动占位符/标签。然后我想改变焦点的行为，去除阴影和改变边框。下面是我现在的代码，几乎可以工作：

.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>

当聚焦在元素上时，一切看起来都很好。然而，当我不聚焦时，由于某种原因，有一个黑色的顶部边框 Flink 。为什么会发生这种情况？
我试图删除过渡，但它仍然存在。我如何使它过渡回浅灰色，它是没有顶部边框 Flink 黑色之间？