Currently, I'm working on creating a search bar with dropdown suggestions using React-bootstrap. My goal is to have the search bar span across the page from one side to another with margins on the left and right. To achieve this, I am enclosing the input field within a < Container > element. However, I am facing an issue with styling where I want to remove the default blue outline that appears when the input field is highlighted. Despite trying various solutions, I haven't been successful in getting rid of it. Even inspecting the applied CSS through the browser didn't provide any insights.
Additionally, the search bar is set to display only upon clicking the search button. I am not sure if this detail affects the solution. Below is the code snippet where I attempted to address the styling issue:
<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;
}
/* This rule is repeated just to ensure focus behavior */
.search-dropdown input:focus {
outline: none !important;
}