css - 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 */