CODEWITHSUNDEEP
htmlcss
elena6978
elena6978

Reputation: 32

Select doesn't show as Normal in FireFox

enter image description here

enter image description here

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

Upvotes: 0

Views: 35

Answers (1)

Zuber
Zuber

Reputation: 3473

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>

Upvotes: 1

Related Questions