html - 选择在FireFox中不显示为“正常”

.select-color:before {
    content: "\f0dd";
    font: normal normal normal 26px/1 FontAwesome;
    color: #d0415d;
    right: 18px;
    top: 4px;
    height: 34px;
    position: absolute;
    pointer-events: none;
    padding-right: 10px;
}
select {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 15px;
    border-radius: 5px !important;
    width: 100px;
    height: 45px;
    -webkit-appearance: button;
}

<div class="select-color">
  <select id="first_m" >
	<option ="1">1</option>
    <option ="2">2</option>
    <option ="3">3</option>
  </select>月
</div>

第一张图片未在Firefox中显示为普通元素。
但是下面的图像确实显示为铬中的普通元素。

最佳答案

您可以设置-moz-appearance: none并使父级.select-color相对。

.select-color:before {
    content: "\f0dd";
    font: normal normal normal 26px/1 FontAwesome;
    color: #d0415d;
    right: 18px;
    top: 4px;
    height: 34px;
    position: absolute;
    pointer-events: none;
    padding-right: 10px;
}

.select-color {
    display: inline-block;
    position: relative;
}
select {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 15px;
    border-radius: 5px !important;
    width: 100px;
    height: 45px;
    -webkit-appearance: button;
    -moz-appearance: none; // Added
}

<div class="select-color">
    <select id="first_m" >
      <option ="1">1</option>
      <option ="2">2</option>
      <option ="3">3</option>
    </select>月
</div>

关于html - 选择在FireFox中不显示为“正常”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50001421/