Html mozilla浏览器选择框的css

我想在chrome和mozilla浏览器中创建具有相同样式的选择框。 我已经设计了我想要的选择框。它在chrome中运行良好，但在mozilla中“选择”箭头显示为按钮。我想为mozilla编写css

选择{
边框：1px实心#ffffff；
背景色：#8b3ca8；
颜色：#ffffff；
高度：30px；
字号：10pt；
/*宽度：150px；
左边距：8px*/
宽度：199px；
左边距：13px；
}

选择1
选择2
选择3

试试这个

。选择包裹选择{
边框：1px实心#ffffff；
背景色：#8b3ca8；
颜色：#ffffff；
高度：30px；
字号：10pt；
宽度：199px；
左边距：13px；
-moz外观：无；
-webkit外观：无；
}
.选择包裹{
位置：相对位置；
显示：内联块
}
.selectWrap:：before{
内容：''；
显示：块；
边框：5px实心透明；
边框顶部颜色：#fff；
位置：绝对位置；
右：10px；
顶部：钙（50%-2px）；
}

选择1
选择2
选择3

将-moz外观设置为“无”。这将“重置”元素的样式

将文本缩进设置为0.01px。这会将文本向右“推”一点点

将文本溢出设置为“”（空字符串）。这会将超出元素宽度的任何内容更改为。。。没什么

选择{
边框：1px实心#ffffff；
背景色：#8b3ca8；
颜色：#ffffff；
高度：30px；
字号：10pt；
宽度：199px；
左边距：13px；
-moz外观：无；
文本缩进：0.01px；
文本溢出：“”；
}

选择1
选择2
选择3

尝试为此使用字体和伪元素

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

---

需要在选择中显示白色箭头box@user3386779，在这里你可以得到解决方案