0

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 -

enter image description here

Mozilla -

enter image description here

Could you please help I have used width: webkit-mozilla but I want this to work fine on both.

1 Answer 1

1

Give browser specific css.You can give padding according to set search icon.I hope it will helps you.

@-moz-document url-prefix(){
   .search-icon-button {
    color: #FF7D50 !important;
    padding: 3px 0px 0px 4px !important;
  }
}
1
  • But I think the problem comes from that icon is getting outside the div width only. Without search-icon-button css selector also it should be inside that div. Dec 24, 2019 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.