火狐CSS选项样式不起作用

Question

>我正在尝试使用 CSS 更改我的选项选择框样式。

在谷歌浏览器中一切正常，但样式在Mozilla Firefox中不起作用。

我在Mozilla Firefox中也缺少什么来工作我的CSS代码？

谁能在这方面帮助我？

.container {
position:relative;
width:100%;
max-width:500px;
margin:0px auto;
margin-top:100px;
padding:40px;
background-color:#fafafa;
border:1px solid #d8dbdf;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.i_bd  select {
background-color: rgb(255, 255, 255,1) !important;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
padding:18px;
color:#333333;
font-size:13px;
font-weight:500;
outline:none;
border: 1px solid rgba(239, 239, 239, 1);
width:80px;
height:30px;	
}
.i_bd {
	 -webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
position: relative;
	float:left;
	margin-right:10px;
}

<div class="container">
<div class="i_bd">
<select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div> 
</div>

Answer 1

根据我的评论：众所周知，<select>元素由于干扰操作系统和供应商特定的样式而难以设置样式。最好的方法是完全重置元素，使用appearance属性并将其设置为none，然后使用背景图像代替下拉箭头。

样式的另一个问题是，您在 select 元素上声明了18px填充，但它的高度仅为30px。这会导致内容没有空间(实际上是 -6px(要显示。如果将垂直填充减少到较低的值，将显示文本。在这种情况下，我使用了padding: 4px 18px.

在下面的概念验证示例中，我使用了 Google Material Icon 的下拉箭头，该箭头已转换为 base64 代码。您可以使用此站点轻松地将任何 SVG 转换为 base64。

.container {
position: relative;
width: 100%;
max-width: 500px;
margin: 0px auto;
margin-top: 100px;
padding: 40px;
background-color: #fafafa;
border: 1px solid #d8dbdf;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.i_bd select {
background-color: rgb(255, 255, 255, 1) !important;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
/* Ensure that top/bottom padding is reduced! */
padding: 4px 18px;
color: #333333;
font-size: 13px;
font-weight: 500;
outline: none;
border: 1px solid rgba(239, 239, 239, 1);
width: 80px;
height: 30px;

/* Disable vendor-specific appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

/* Use triangle background as arrow */
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTcgMTBsNSA1IDUtNXoiLz48L3N2Zz4=);
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: center right;
}
.i_bd {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
position: relative;
float: left;
margin-right: 10px;
}

<div class="container">
<div class="i_bd">
<select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>