Question

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

Google Chrome中的一切正常，但样式在Mozilla Firefox中不起作用。

我还缺少在Mozilla Firefox中使用我的CSS代码吗？

有人可以帮我这方面吗？

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

在下面的概念验证示例中，我使用了转换为base64代码的https://codepen.io/greggman/pen/aymqdV。您可以使用Google Material Icon's dropdown arrow轻松将任何SVG转换为base64。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

firefox css选项样式不会工作

1 个答案: