求Bootstrap输入框悬停效果的原生CSS实现方案（无需Bootstrap类）

Bootstrap的.form-control自带基础hover样式，要是需要自定义效果，直接基于它的类写CSS就行：

/* Bootstrap自定义悬停效果 */
.form-control:hover {
  border-color: #86b7fe; /* 自定义边框色，和Bootstrap焦点色呼应 */
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1); /* 轻量阴影增强层次感 */
  background-color: #f8f9fa; /* 浅灰背景突出状态 */
}

/* 联动输入组前置元素的悬停效果 */
.input-group:hover .input-group-text {
  background-color: #e9ecef;
  border-color: #86b7fe;
}

你提供的HTML代码可以直接用，上面的CSS会自动应用到对应元素上。

完全不用Bootstrap的话，我们自己实现输入组布局和悬停样式即可：

HTML代码 #

<div class="custom-form">
  <div class="custom-input-group">
    <div class="custom-input-prepend">
      <span class="custom-input-text">@</span>
    </div>
    <input type="text" class="custom-input" placeholder="Username">
  </div>
</div>

CSS代码 #

/* 基础布局样式 */
.custom-form {
  width: 300px;
  margin: 20px;
}

.custom-input-group {
  display: flex;
}

.custom-input-prepend {
  display: flex;
  align-items: center;
}

.custom-input-text {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
}

.custom-input {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0 0.375rem 0.375rem 0;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-input:focus {
  outline: none;
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* 悬停效果 */
.custom-input:hover {
  border-color: #86b7fe;
  background-color: #f8f9fa;
}

.custom-input-group:hover .custom-input-text {
  background-color: #dee2e6;
  border-color: #86b7fe;
}

这套代码能实现和Bootstrap风格类似但完全自定义的输入框悬停效果，还包含输入框和前置元素的联动状态变化。

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