Bootstrap 4中文本框轮廓无法移除？求有效解决方法

嘿，我懂你的困扰——Bootstrap默认的文本框焦点样式确实有点“顽固”，你现有代码没生效主要是两个原因：

1. Bootstrap 4的.form-control在**焦点状态（:focus）**下，是用box-shadow实现的焦点轮廓，而不是你设置的outline，所以单独加outline: 0根本碰不到它。
2. 你的CSS选择器没有针对:focus状态，而且权重可能不如Bootstrap自带的样式。

正确的解决方法 #

直接针对文本框的:focus状态，覆盖Bootstrap的box-shadow样式就行，这里给你两种方案：

方案1：精准匹配你的DOM结构（推荐，权重足够）

把你的CSS修改成这样，专门处理焦点状态：

#content #main-content .form-control[type=text]:focus {
  border: 1px solid #ccc; /* 保持你想要的边框样式 */
  height: 40px;
  padding-left: 10px;
  outline: 0;
  box-shadow: none; /* 关键！移除Bootstrap的焦点阴影 */
}

方案2：全局移除所有.form-control的焦点轮廓

如果你想让所有Bootstrap文本框都去掉这个焦点样式，可以写更通用的规则：

.form-control:focus {
  box-shadow: none;
  outline: 0;
}

注意事项 #

• 确保你的自定义CSS是在Bootstrap的CSS之后加载的，这样才能覆盖默认样式。
• 尽量避免用!important，除非你遇到权重实在无法覆盖的情况（比如Bootstrap用了更高权重的选择器），但上面的方案已经足够覆盖大部分场景啦。

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