IE和Firefox - 自定义下拉菜单无法删除原生箭头

Question

我正在尝试创建自定义下拉控件,我需要隐藏本机控件中的箭头.我正在使用以下内容CSS,适用于Chrome和Safari,但不适用于Mozilla和IE.

select.desktopDropDown
{
    appearance: none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
}

这是[jsfiddle] [1].

Answer 1

使用它,它将工作,但使用IE10 +和FF:

你的CSS应该是这样的:

select.desktopDropDown::-ms-expand {
    display: none;
}

更多关于::ms-expand.

然后休息:

select.desktopDropDown {
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';
    background : url("../img/assets/arrow.png") no-repeat right #666;

    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
}

注意:我将路径硬编码"../img/assets/arrow.png"为背景.

这在IE,Firefox和Opera中应该对你有用.

Answer 2

裸骨的例子:

对于IE:

select::-ms-expand {
    display: none;
}  

对于Firefox:

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

    text-overflow: ''; /* this is important! */
}