IE& Firefox - 自定义下拉不能删除本机箭头 [英] IE & Firefox - custom drop down could not remove native arrows

问题描述

我正在尝试创建一个自定义下拉控制，我需要隐藏的箭头从原生控件。我使用以下 CSS ，它适用于Chrome和Safari，但不适用于Mozilla和IE。

I'm trying create a custom drop down control and I need to hide the arrows from the native controls. I'm using the following CSS, which is working for Chrome and Safari, but not in Mozilla and IE.

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

这里是一个[jsfiddle] 。

Here is a [jsfiddle][1].

推荐答案

使用它可以使用IE10 +和FF：

Use this it will work but with IE10+ and for FF :

您的CSS应该如下所示：

Your css should look like this:

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作为背景。

Note: I hardcoded path "../img/assets/arrow.png" as background.

这应该适用于IE，Firefox和歌剧。

This should work good for you in IE, Firefox and Opera .

这篇关于IE& Firefox - 自定义下拉不能删除本机箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！