Firefox 和 Internet Explorer 中下拉菜单的 UI 问题答案

【问题标题】：UI issue for dropdown in firefox and Internet explorerFirefox 和 Internet Explorer 中下拉菜单的 UI 问题
【发布时间】：2017-08-10 15:06:17
【问题描述】：

我创建了一个下拉菜单

<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 中如下所示

一些白色背景进入箭头，如何解决这个问题？

【问题讨论】：

这是一种浏览器行为...如果您想为所有浏览器设置相同的下拉菜单，请选择 JavaScript 自定义下拉菜单

标签： css html internet-explorer firefox

【解决方案1】：

那是因为你不使用这个，

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

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

【讨论】：