I have a simple search bar which contain a div and inside that div there is - input element for text and search button.
<div className="search-box">
<input
type="text"
placeholder={PLACEHOLDER.search}
value={this.state.search}
onChange={this.updateSearchBar}
onKeyUp={this.keyPress}
/>
<IconButton className="search-icon-button" onClick={this.handleSearchIcon}>
<SearchIcon />
</IconButton>
</div>
Css file -
.search-box {
border: 1px solid black;
width: 200px;
height: 30px;
display: flex;
min-width: 180px;
margin-right: 2%;
padding-left: 1px;}
.search-box input{
width: 100%;
color: black;
border: none;
outline: none;
}
.search-icon-button {
color: #FF7D50 !important;
padding: 3px 0px 0px 7px !important;
}
IconButton and SearchIcon are material ui component.
Below I am attaching the screen shot of chrome and mozilla.
Chrome -
Mozilla -
Could you please help I have used width: webkit-mozilla but I want this to work fine on both.