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

Question

＆＃13;

＆＃13;

find

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

第一张图片在firefox中不显示为普通元素。 但是下面的图像确实在chrome中显示为普通元素。

Answer 1

您可以设置-moz-appearance: none并使parrent .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>