web-dev-qa-db-ja.com

IEの選択矢印を削除

私は要素を選択している、私は矢印を削除したい、それから私は他のアイコンを追加することができます..私はFirefoxのSafariと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答えてください。

htmlcsscss3html-select
115
Muath

IE9では、@ Spudleyが推奨するように 純粋にハック を使うことが可能です。 divの高さと幅をカスタマイズして選択したので、div:before cssを自分のものに合うように変更する必要があります。

IE10ならcss3以下を使っても可能です

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

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

297
Praveen

私はあなたが見つけることができる私の解決策をお勧めします このGitHubリポジトリで 。これはIE 8とIE 9でも動作しますアイコンフォントから来るカスタム矢印。

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

とにかく、最近のブラウザから始めましょう、それから私たちは古いもののための解決策を見るでしょう。

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（IE 8）およびInternet Explorer 9（IE 9）のドロップダウン矢印

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

これらのブラウザのデフォルトの矢印を非表示にするための標準的な規則はありません（IE10 +のselect::-ms-expandのように）。解決策は、デフォルトの矢印を含むドロップダウンの部分を非表示にし、矢印アイコンのフォント（またはSVG）を挿入することです。他のブラウザで使用されているSVGに似ているのであれば（使用されるインラインSVGの詳細についてはselect CSSルールを参照してください）。

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

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

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

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

ドロップダウンのように振る舞うために、ラッパーはボーダーを持たなければなりません、なぜなら我々はselectから来るものを隠すからです。

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

カスタムの矢印icon-fontは、疑似クラス: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ルールで変更するか、自分で新しいアイコンのフォントファイルを作成するだけで済みます。

4
Ferie

あなたがクラスと擬似クラスを使いたい場合：

.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;
}
3
Tejasvi Hegde