在Firefox和Internet Explorer中下拉列表的UI问题

Question

我创建了一个下拉列表

<div class="col-lg-2 header-dropdown">
    <select (change)="onProjectChange($event.target.value)">
        <option *ngFor="let project of projectNameList" [value]="project.name" [selected]="project.selected">{{project.name}}</option>
    </select>
</div>

我的下拉列表在chrome中看起来像这样

在Firefox和Internet Explorer中如下

一些白色背景出现在箭头中，如何解决这个问题？

Answer 1

那是因为你不能使用它，

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; 
}

select::-ms-expand { display: none; } /*For IE */