web-dev-qa-db-ja.com

IE8およびIE9でドロップダウン矢印を非表示にする方法

下のCSSを使用して、FF、safari、chromeのドロップダウン矢印を非表示にし、カスタマイズするための独自の画像を追加しました。

select 
{
  -webkit-appearance:none;
  -moz-appearance:none;
  -o-appearance:none;
   appearance:none; 
}

IE10では、擬似要素を使用しました

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

IE9とIE8に同じことを適用する方法がわかりません。 IE8とIE9でドロップダウン矢印を非表示にする方法を教えてください。

htmlcssinternet-explorerdrop-down-menu
44
Royal

IE8とIE9のソリューションを求めました。

IE8から始めましょう。簡単な答え：できません。 IE8およびそれ以前のバージョンでは選択ボックスがレンダリングされるため、ドロップダウン矢印を非表示にすることはできません。選択ボックスコントロールは、古いIEでスタイルを設定することは不可能であり、常に他のコンテンツの上に配置されて表示されます。

Javascriptで選択ボックスコントロール全体を書き換える以外に、これに対する解決策はありません。

今IE9。あなたcanドロップ矢印を非表示にします。これは標準的なものではありませんが、ハッキングすることはできます。

選択ボックスを囲むラッパー要素（<div>など）で開始する必要があります。次に、:beforeセレクターでスタイルを設定して、ドロップ矢印の上部に余分なコンテンツを配置し、効果的に非表示にします。

CSSは次のとおりです。

div {
    position:relative;
    display:inline-block;
    z-index:0
}
div select {
    z-index:1;
}

div:before {
    display:block;
    position:absolute;
    content:'';
    right:0px;
    top:0px;
    height:1em;
    width:1em;
    margin:2px;
    background:red;
    z-index:5;
}

...そして こちらを参照 jsFiddleが実際に動作していることを確認します。

注：何が起きているのかを明確にするために、redをオーバーレイの色として使用しました。明らかに通常の使用では、目立たないように白を使用する必要があります。

また、上記で述べたように、これはIE8では機能しないことに注意してください。

明らかに、これは実際に矢印を削除するIE10や他のブラウザーの「適切な」ソリューションとは異なります。ここで行っているのはそれを隠すことだけです。そしてこれは、矢印があった選択ボックスの最後に迷惑な白いパッチができてしまうことを意味します。

これを解決するためにさらにスタイリングを行うことができます。たとえば、コンテナ要素を固定幅にし、overflow:hiddenを使用すると、白いパッチを取り除くことができますが、選択ボックスの境界が壊れる問題があります、したがって、さらにスタイルの修正を行う必要があります。少し面倒です。さらに、このオプションは、選択ボックス自体が既知の固定幅である場合にのみ機能します。

IE 9でこれを行うためのオプションがあります。しかし、彼らはきれいではありません、そして率直に言って努力の価値がないかもしれません。しかし、あなたが必死なら、あなたはそれをすることができます。

ああ、このCSSコードをIE9でのみ実行できるようにすることを忘れないでください。そうしないと、他のブラウザーで問題が発生します。

39
Spudley

IE9 <の純粋なCSSの矢印を削除することはできません。だからこそ、IE10で::-ms-expandを作成しました。

ただし、このようなことを行うことができます。 jsFiddle here

この例では、widthに固定selectを設定し、ドロップダウンをマスク/非表示にするために、divをより低いwidthおよびoverflow:hiddenでラップします。 。完全にサポートされています。これは本質的にすべてのブラウザで矢印を非表示にしますdoes。

CSS

div {
    width: 80px;
    overflow: hidden;
    border: 1px solid black;
}
select {
    width: 100px;
    border: 0px;
}
19
Josh Crozier

すべてのユースケースについてはわかりませんが、私の場合、固定幅x高さbg picが親に設定されているため、これはIEおよびFFでも機能しました。

HTML

<div id="parent">
  <select>
    ...
  </select>
</div>

CSS

#parent{
  ...
  overflow: hidden;
  width:100px; // for example
}

#parent select{
  ...
  width:120px;
}

jsfiddle

2
Tamás Matyó

IEの古いバージョンでこれを達成する唯一の方法は、<select>をわずかに小さいコンテナーにラップしてoverflow: hidden;を設定することです。これにより、右側の矢印が非表示になりますドロップダウンをクリックして開きます。面倒ですが、あなたが望むことを達成する唯一の方法です。

過去には、これらの要素はオペレーティングシステムの一部と見なされていたため、スタイル設定できませんでした。あなたが言及したような擬似要素が利用できるようになった今、これは問題になりつつあるようです。

2
nullability

IE9の別の悪いが機能的には解決策：D

プレビュー

// CSS

div {
    position:relative;
    display:inline-block;
    border:solid black 1px;
    z-index:0
}
div select {
    z-index:1;
    border:none;
    width:200px;
}

div:before {
    display:block;
    position:absolute;
    content:url('http://help.Eclipse.org/mars/topic/org.Eclipse.stardust.docs.enduser/html/handbooks/execution-clients/rules/images/arrow.png');
    right:-2px;
    top:-1px;
    padding-left:2px;
    height:18px;
    width:15px;
    margin:2px;
    background:white;
    z-index:445;
    border: 0;
}

必要なのは、このコードをIE9メディアクエリハックでカプセル化することだけです

/* IE9 */
    @media screen and (min-width:0\0) {

    }
/* IE9 */

jsFiddle

1
Alberto