How can i remove the outline from FormControl when the input field is highlighted? (React-bootstrap)

Issue

So, I'm trying to make a search bar with some suggestions in dropdown. I'm using React-bootstrap. Now, I want to style it such that it goes from one side of the page to another, but with margins left and right (so I'm placing the input field inside of a < Container >). As a stylistic choice, I need to remove the blue outline the input field has when it gets highlighted. I tried everything, but nothing seems to work. Also, looking at the CSS being applied in browser inspector didn't help. As a final note, the search bar gets shown when the search button is clicked, I don't know if this makes any difference. This is the "most right" code I've tried so far:

<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;
}

Solution

Has been box-shadow applied on focus input as outline by bootstrap. So, You will need to apply box-shadow: none; on it input for disable box shadow.

You can try this:

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

Answered By - HDP