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

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

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

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

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

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

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

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


著者について

Junji Yamamoto

広島県広島市育ち、現在岡山でWeb制作の仕事をしています。主に「Web関連で勉強したこと、役立つアイディア」をテーマにした内容を備忘録としてブログに書いています。大学卒業後は勤務している会社のWeb制作を担当。小規模サイトから大学公式サイトの制作・運営などに携わっています。

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