css for select box for mozilla browser

Question

I want to create the select box with same style in chrome and mozilla browser. I have designed the select box which I want actually.Its work fine in chrome but in mozilla 'select' arrow appears as button.I want to write the css for mozilla

select{
 border:1px solid #ffffff;
 background-color: #8b3ca8;
 color:#ffffff;
 height:30px;
 font-size:10pt;
 /*width: 150px; 
 margin-left: 8px; */
 width: 199px;
    margin-left: 13px;
}

<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>

Demo

score 2 · Answer 1 · answered Feb 03 '17 at 09:26

Set -moz-appearance to none. This will "reset" the styling of the element;
Set text-indent to 0.01px. This will "push" the text a tiny bit to the right;
Set text-overflow to '' (an empty string). This will change anything that extends beyond the element's width to... nothing

select{
 border:1px solid #ffffff;
 background-color: #8b3ca8;
 color:#ffffff;
 height:30px;
 font-size:10pt; 
 width: 199px;
    margin-left: 13px;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>

@user3386779, here you can get sollution [here](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-element-in-firefox) — JH_, Feb 03 '17 at 10:10

Talent Runners · Answer 2 · 2017-02-03T10:05:09.823

Try this

.selectWrap select {
  border: 1px solid #ffffff;
  background-color: #8b3ca8;
  color: #ffffff;
  height: 30px;
  font-size: 10pt;
  width: 199px;
  margin-left: 13px;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.selectWrap{
  position: relative;
  display:inline-block
}
.selectWrap::before {
    content: '';
    display: block;
    border: 5px solid transparent;
    border-top-color: #fff;
    position: absolute;
    right: 10px;
    top: calc(50% - 2px);
}

<div class="selectWrap">
  <select>
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
  </select>
</div>

need to display white arrow in select box – user3386779 Feb 03 '17 at 09:18 — user3386779, Feb 03 '17 at 09:18

score 0 · Answer 3 · answered Feb 03 '17 at 09:47

Try to using Font Awesome and Pseudo elements for this.

select {
    border:1px solid #ffffff;
    background-color: #8b3ca8;
    color:#ffffff;
    height:30px;
    font-size:10pt;
    width: 199px;
  margin-left: 13px;
  padding: 0 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select {
  width: 199px;
  position: relative;
}

.select:before {
  content: '\f0d7';
  font-family: 'FontAwesome';
  color: #fff;
  display: inline-block;
  position: absolute;
  right: -5px;
  top: 5px;
  pointer-events: none;
  z-index: 1;
}

demo

css for select box for mozilla browser

3 Answers3