html - firefox css 选项样式不起作用

Question

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

在 Google Chrome 中一切正常，但样式在 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 ，然后使用背景图像代替下拉箭头。

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

在下面的概念验证示例中，我使用了 Google Material Icon's dropdown arrow即转换为 base64 代码。您可以使用 this site 轻松地将任何 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>