html - 搜索图标移出 div,在 chrome 中可以正常工作,但在 Mozilla 中不行
问题描述
我有一个简单的搜索栏,其中包含一个 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的屏幕截图。
铬合金 -
Mozilla -
你能帮我用 width: webkit-mozilla 但我希望这两者都能正常工作。
解决方案
给浏览器特定的css。你可以根据设置的搜索图标给填充。希望对你有帮助。
@-moz-document url-prefix(){
.search-icon-button {
color: #FF7D50 !important;
padding: 3px 0px 0px 4px !important;
}
}
推荐阅读
- c - 获取数组的两个地址的差异(使用&运算符)
- python - 如何在 CefPython 中启用外部文件链接?
- tensorflow - 使用 tf.data API 同时预处理 n 个文件
- c++ - 如何修复 bad_typeid 异常
- spring - 响应:状态 406 - 春天
- r - 将数据框加入多个列表
- r - 如何在r闪亮中固定主面板的位置
- android - LinearLayout 是否有替代 layout_alignBaseline
- php - 更改 PHP 数组中条目的键
- azure-devops - 如何将 Azure DevOps Extension for Azure CLI 与 Azure DevOps Server 一起使用?