输入框border-color、transition及:focus属性失效问题求助

问题根源分析 #

1. 选择器不匹配：HTML中的input未指定type="text"，导致CSS里的input[type=text]:focus选择器无法命中元素，聚焦样式完全不生效。
2. Bootstrap全局样式干扰：Bootstrap对input默认设置了outline、box-shadow（聚焦状态），以及可能的border-style/border-width差异，导致自定义border-color仅部分生效，过渡效果被掩盖。
3. 优先级不足：直接使用input选择器的优先级低于Bootstrap的全局input样式规则，即使加!important也可能因样式属性的覆盖逻辑（比如outline替代边框视觉效果）而无效。

修复方案 #

步骤1：优化HTML结构

给input添加自定义类（提升选择器优先级），同时指定type="text"确保聚焦选择器生效：

<input type="text" class="search-input col-sm-10 col-md-5" placeholder="Example text">

步骤2：重置并自定义CSS样式

通过自定义类提高优先级，重置Bootstrap的干扰样式，确保边框、聚焦效果和过渡正常工作：

.search-input {
  border-radius: 3rem;
  height: 5rem;
  /* 重置border属性，确保四个边样式统一 */
  border: 1px solid #999999;
  font-family: "Poppins";
  font-size: 1.5rem;
  /* 包含border-color和box-shadow的过渡，覆盖聚焦时的视觉变化 */
  transition: all 1s ease;
  /* 去掉Bootstrap默认的outline */
  outline: none;
}

.search-input:focus {
  border-color: #85de46;
  /* 可选：自定义聚焦时的box-shadow，和边框颜色呼应 */
  box-shadow: 0 0 0 0.2rem rgba(133, 222, 70, 0.25);
}

关键说明 #

• 使用自定义类.search-input替代通用input选择器，避免与Bootstrap全局样式优先级冲突，无需依赖!important。
• 直接设置border简写属性（宽度+样式+颜色），确保四个边框样式统一，解决仅下半部分生效的问题。
• 重置outline: none并自定义box-shadow，覆盖Bootstrap默认的聚焦高亮样式，让自定义边框颜色成为视觉焦点。
• 过渡属性设为all（或明确指定border-color, box-shadow），确保聚焦时的颜色变化有平滑过渡效果。

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