1. ホーム
  2. css

IE10の選択要素の矢印を削除する

2023-09-16 04:07:44

質問

Mozilla と WebKit を使って、私は半分まともな解決策を持っています。 select ボックスの矢印を appearance: none; を使用し、親要素を持つ。

IE では、ほとんどの場合、この機能を無効にしました。IE10 では、条件付きコメントが実際に機能しないので、実際に無効にすることはできません。

以下は私のマークアップです。

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)]>    <html class="ie10plus"> <![endif]-->
<!--[if !(IE)]><!--> <html> <!--<![endif]-->

クラス ie10plus は実際にはマークアップに使われることはありません。

また、IEの矢印を置き換える正当な方法がありそうな気がします。実際に問題を修正することに反対しているわけではありません。 appearance: none; ではうまくいきません。では、ここでどうすればいいのでしょうか?

どのように解決するのですか?

ブラウザ スニッフィングや条件付きコメント (Internet Explorer 10 ではサポートされていません) を避け、より標準的なアプローチを取るようにします。この特定の問題では ::-ms-expand 擬似要素です。

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