css - IE と Firefox - カスタム ドロップダウンでネイティブの矢印を削除できませんでした

Question

カスタム ドロップ ダウン コントロールを作成しようとしていますが、ネイティブ コントロールから矢印を非表示にする必要があります。CSSChrome と Safari では動作しますが、Mozilla と IE では動作しません。

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

これが[jsfiddle][1]です。

Answer 1

Fx の場合-moz-appearance: checkbox-container、うまく機能するものを使用します。

したがって、すべてをまとめると、次のようにすれば十分です。

select.desktopDropDown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: checkbox-container;
    border-style: none;
}
select.desktopDropDown::-ms-expand {
    display: none;
}