当输入字段突出显示时，如何从 FormControl 中删除轮廓？ （反应引导）

Question

所以，我正在尝试制作一个搜索栏，并在下拉菜单中提供一些建议。我正在使用 React-bootstrap。现在，我想对其进行样式设置，使其从页面的一侧移动到另一侧，但具有左右边距（因此我将输入字段放置在 < Container > 内部）。作为一种风格选择，我需要删除输入字段突出显示时的蓝色轮廓。我尝试了一切，但似乎没有任何效果。另外，查看浏览器检查器中应用的 CSS 也没有帮助。最后一点，单击搜索按钮时会显示搜索栏，我不知道这是否有什么区别。这是迄今为止我尝试过的“最正确”的代码：

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

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

.search-dropdown input {
  border: none !important;
  outline: none !important;
}
/* Repeating myself because I don't know if only focus would work */
.search-dropdown input:focus{
  outline: none !important;
}

Answer 1

已将box-shadow应用于焦点输入作为引导程序的轮廓。因此，您需要在其输入上应用

box-shadow: none;

来禁用框阴影。

你可以试试这个：

.search-dropdown .form-control:focus{
  box-shadow: none;
}