Issue:
I'm facing a challenge with my custom search box in a React application. Despite my styling efforts, I can't seem to get the desired outline effect when someone types in the textbox.
<div className="search-box">
<Row>
<div className="search-box-icon">
<i className="fas fa-search" />
</div>
<input
className="search-input"
placeholder="search in listbox"
/>
</Row>
</div>
The CSS styles I've applied so far are as follows:
.search-box-icon {
margin-left: 1%;
}
.search-input {
border: none;
}
.search-input:focus {
outline: none;
}
.search-box:focus {
outline-color: #53c9fc;
outline-width: 2px;
}
If anyone has a solution to help me achieve the desired outlined effect on the search-box div when typing in the textbox, I would greatly appreciate it. Thank you.