如何移除React-bootstrap中FormControl输入框高亮时的外边框？

React-bootstrap的FormControl组件自带的聚焦样式优先级较高，且默认用box-shadow实现高亮效果，这就是你之前的样式不生效的原因。试试下面的方案：

核心修改思路 #

• 用更具体的CSS选择器覆盖组件默认样式，避免被优先级更高的内置样式覆盖
• 同时移除outline和box-shadow（组件聚焦时的蓝色效果来自后者）

修改后的代码 #

JSX部分（无需改动）

<div className="search-dropdown">
  <Container>
    {showSearch && (
    <Form inline>
      <FormControl
        type="text"
        placeholder="Search for a Product"
      />
    </Form>
    )}
  </Container>
</div>

CSS部分

.search-dropdown{
  width: 100%;
  border: 1px solid black;
  z-index: 9999;
  position: fixed;
}

/* 匹配FormControl自带的form-control类，重置默认边框 */
.search-dropdown .form-control {
  border: none;
}

/* 聚焦状态下彻底移除高亮效果 */
.search-dropdown .form-control:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

额外说明 #

• 动态渲染（showSearch控制显示）不会影响样式生效，因为CSS规则是提前加载的，元素渲染后会自动匹配
• 如果还是不生效，打开浏览器检查器查看元素的最终样式，确认是哪个规则在覆盖你的自定义样式，再进一步调整选择器的优先级

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