我有一个简单的搜索栏,其中包含一个 div 并且在该 div 中有 - 文本和搜索按钮的输入元素。
<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 文件 -
.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 和 SearchIcon 是 Material ui 组件。
下面附上 chrome 和 mozilla 的屏幕截图。
Chrome -
Mozilla -
你能帮忙吗我已经使用了 width: webkit-mozilla 但我希望它在两者上都能正常工作。
最佳答案
给浏览器特定的css。你可以根据设置的搜索图标给padding。希望对你有帮助。
@-moz-document url-prefix(){
.search-icon-button {
color: #FF7D50 !important;
padding: 3px 0px 0px 4px !important;
}
}
关于html - 搜索图标移出 div,在 chrome 中工作正常但在 mozilla 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59469435/