在FireFox中选择不显示为正常(Select doesn't show as Normal in 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中没有显示为正常元素。 但下面的图像显示为正常的铬元素。 
 

 

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

 

First image doesn't show as normal element in firefox. But below image does show as normal element in chrome.

                
最满意答案

                
                    
                        
 你可以设置-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> 
  
 

You can set -moz-appearance: none and make the parrent .select-color relative.
 

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

更多推荐