Select doesn't show as Normal in FireFox

Question

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

Possible duplicate of [How to remove the arrow from a select element in Firefox](https://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-element-in-firefox) — Gerard, Apr 24 '18 at 12:22

score 1 · Accepted Answer · answered Apr 24 '18 at 12:20

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>

if this answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. :) — Zuber, Apr 24 '18 at 12:23

Select doesn't show as Normal in FireFox

1 Answers1