Bootstrap输入框修改focus样式后失焦时顶部边框闪烁问题

你遇到的顶部边框闪烁问题，核心原因是Bootstrap 3的.form-control默认带有完整的1px灰色边框（包含top边框），而你仅在focus状态下把border-top设为none，但没有给非focus状态的边框变化添加过渡，也没有统一初始样式。当输入框失焦时，浏览器要从border-top: none突然切换回默认的border-top: 1px solid #ccc，这个无过渡的样式切换就会产生黑色闪烁的视觉效果。

另外，你的浮动标签容器没有设置position: relative，导致标签的绝对定位是基于父级的.row，这也会影响布局的稳定性。

我们可以通过以下两步解决问题：

1. 给输入框的父容器添加position: relative，确保浮动标签的定位正确。
2. 不要直接移除border-top，而是通过调整浮动标签的位置和样式，让标签覆盖住输入框的顶部边框，同时给输入框的border属性添加过渡效果，保证focus/失焦时的边框变化平滑。

修正后的完整代码：

.paddings{
  padding: 5rem;
}
/* 给输入框父容器添加相对定位 */
.input-wrapper {
  position: relative;
}
/* 统一输入框的基础样式和过渡 */
input.my-input {
  border: 1px solid #ccc;
  transition: border-color 0.2s ease;
}
input.my-input:focus{
  box-shadow: none;
  border-color: rgba(0, 100, 173, 0.5);
}
.floating-label{
  color: rgb(80 80 80);
  pointer-events: none;
  position: absolute;
  left: 1rem; /* 调整为和输入框内边距匹配 */
  top: 0.75rem;
  background-color: #fff; /* 添加白色背景覆盖顶部边框 */
  padding: 0 0.25rem;
  transition: 0.2s ease all;
}
input:focus ~ .floating-label{
  color: rgb(40 40 40);
  font-size: 0.85rem;
  top: -0.65rem;
  left: 0.75rem;
}

<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 class="input-wrapper"> <!-- 添加容器 -->
      <input class="form-control my-input" type="text"> 
      <span class="floating-label">Search</span>
    </div>
  </div>
</div>

• 给输入框添加了全局的border样式和transition，确保focus/失焦时边框颜色平滑过渡，不会出现突然的样式跳变。
• 给浮动标签添加background-color: #fff和左右内边距，让标签在浮动时能覆盖住输入框的顶部边框，视觉上达到“顶部边框消失”的效果，同时避免了直接移除border-top带来的闪烁问题。
• 调整了标签的初始定位，让它和输入框的内边距更匹配，布局更合理。

内容的提问来源于stack exchange，提问作者eligolf