Tengo una barra de búsqueda simple que contiene un div y dentro de ese div hay un elemento de entrada para el texto y el botón de búsqueda.

{amp}lt;div className="search-box"{amp}gt; {amp}lt;input type="text" placeholder={PLACEHOLDER.search} value={this.state.search} onChange={this.updateSearchBar} onKeyUp={this.keyPress} /{amp}gt; {amp}lt;IconButton className="search-icon-button" onClick={this.handleSearchIcon}{amp}gt; {amp}lt;SearchIcon /{amp}gt; {amp}lt;/IconButton{amp}gt; {amp}lt;/div{amp}gt; 

Archivo css —

 .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 y SearchIcon son componentes ui materiales.

A continuación adjunto la captura de pantalla de cromo y mozilla.

Cromo —

ingrese la descripción de la imagen aquí

Mozilla —

ingrese la descripción de la imagen aquí

¿Podría por favor ayudar? He usado width: webkit-mozilla pero quiero que esto funcione bien en ambos.

Proporcione CSS específico del navegador. Puede proporcionar relleno de acuerdo con el icono de búsqueda establecido. Espero que lo ayude.

 @-moz-document url-prefix(){ .search-icon-button { color: #FF7D50 !important; padding: 3px 0px 0px 4px !important; } }