IEの選択矢印を削除する

要素を選択しました。矢印を削除したいので、他のアイコンを追加します。FirefoxSafariとChromeでそれを実行できますが、IE9では機能しませんでした。

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

SEE フィドル上のIE9。IE9で矢印を削除するだけです。JSFIDDLEで回答してください。

IE9では、@ Spudleyの助言に基づく純粋なハックで可能です。divとselectの高さと幅をカスタマイズしたので、div:beforeCSSを自分に合わせて変更する必要があります。

IE10の場合は、以下のcss3を使用できます

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

ただし、jQueryプラグインに興味がある場合は、試すChosen.jsか、jsで独自に作成できます。

このGitHubリポジトリで見つけられる私の解決策を提案します 。 これはIE8とIE9でも機能しますし、アイコンフォントからのカスタム矢印が付いています。

カスタムクロスブラウザドロップダウンの例実際：すべてのブラウザでそれらを確認して、クロスブラウザ機能を確認してください。

とにかく、最新のブラウザから始めましょう。それから、古いブラウザの解決策を見ていきます。

Chrome、Firefox、Opera、Internet Explorer 10以降のドロップダウン矢印

これらのブラウザでは、同じ矢印を持つために、ドロップダウンに同じ背景画像を設定するのは簡単です。

そのためには、ブラウザーのselectタグのデフォルトスタイルをリセットし、新しいバックグラウンドルールを設定する必要があります（前述のように）。

select {
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('<custom_arrow_image_url_here>');
    background-position: 98% center;
    background-repeat: no-repeat;
    outline: none;
    ...
}

の appearanceルールは、各矢印の同じ側面を持つようにしたい場合は、あなたの場所でそれらを維持する必要があり、ブラウザのデフォルトのものをリセットするには、noneに設定されています。

の background例ルールは、さまざまな矢印を表すSVGインライン画像で設定されています。それらは左から98％の位置にあり、右側の境界にいくらかのマージンを確保しています（必要に応じて位置を簡単に変更できます）。

ブラウザ間の正しい動作を維持するために、そのままにしておかなければならない他の唯一のルールは、 outlineです。このルールは、要素がクリックされたときに（一部のブラウザーで）表示されるデフォルトの境界をリセットします。他のすべてのルールは、必要に応じて簡単に変更できます。

アイコンフォントを使用するInternet Explorer 8（IE8）およびInternet Explorer 9（IE9）のドロップダウン矢印

これは難しい部分です...またはそうでないかもしれません。

これらのブラウザーのデフォルトの矢印を非表示にする標準ルールはありません（select::-ms-expandIE10 +の場合など）。解決策は、デフォルトの矢印を含むドロップダウンの部分を非表示にし、他のブラウザーで使用されているSVGと同様の矢印アイコンフォント（または、必要に応じてSVG）を挿入することです（詳細はselectCSSルールを参照）。使用されるインラインSVGの詳細）。

最初のステップは、ブラウザーを認識できるクラスを設定することです。これが、コードの先頭で条件付きIE IFを使用した理由です。これらのIFは、特定のクラスをhtmlタグに添付して、古いIEブラウザーを認識するために使用されます。

その後select、HTML内のすべてをdiv（または要素をラップできる任意のタグ）でラップする必要があります。このラッパーでは、アイコンフォントを含むクラスを追加するだけです。

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
    ...
</div>

簡単に言うと、このラッパーはselectタグをシミュレートするために使用されます。

ドロップダウンのように機能するには、ラッパーに境界線が必要selectです。

selectラッパーより25％長くなるデフォルトの矢印を非表示にする必要があるため、ボーダーを使用できないことに注意してください。その結果overflow: hidden、selectそれ自体に適用されるルールによってこれを25％隠すため、その右の境界線は表示されません。

カスタム矢印アイコンフォントは:before、ルールcontentが矢印の参照を含む疑似クラスに配置されます（この場合は、右括弧です）。

また、この矢印を絶対位置に配置して、できる限り中央に配置します（異なるアイコンフォントを使用する場合は、上と左の値とフォントサイズを変更して、適切に調整してください）。

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    content: ")";
    position: absolute;
    top: 43%;
    left: 93%;
    font-size: 6px;
    ...
}

背景の矢印またはアイコンのフォントの矢印を簡単に作成して置き換えることができます。必要なものはすべて、background-imageルールで変更するか、自分で新しいアイコンのフォントファイルを作成するだけです。

クラスと疑似クラスを使用したい場合：

.simple-control あなたのCSSクラスです

:disabled 疑似クラスです

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}