セレクトボックスIEで矢印が表示される

セレクトボックスをCSSでカスタマイズしようとしたらIEで謎の矢印が表示されたので消す方法

セレクトボックスをCSSでカスタマイズする場合、ブラウザのデフォルトスタイルを無効にしてカスタマイズするかと思います。デフォルトスタイルを無効にするプロパティがappearanceです。

通常下記のようにappearance: none;をセレクトボックスに指定し、どの端末でも対応できるようベンダープレフィックスをつけて、デフォルトスタイルを無効にするのですが…

Internet Explorerではデフォルトスタイルが無効にならない!

ところが、噂のInternet Explorerになると、デフォルトスタイルが完全に無効になっておらず、下図のような矢印が表示されてしまいます。(怒)

せっかく、オリジナルデザインでセレクトボックスをスタイリングしたのに、この矢印で台無し!と思いましたが、この矢印を消去する方法があります。下記CSSを追記してください。

これで、無事謎の矢印がIEでも消去することができました
IEも使用しているユーザーが減ってきているとはいえ(当サイトでは全体の4~5%程度…)、まだまだ完全無視はできない状況なのでこういった対策はまだまだ必要かと思います。いつかIEのことを考えなくても良い日が来るといいですね。


JunJunWeb.Netの新着情報を受け取るには
SNSアカウントをフォローすると便利