IE11でセレクトボックスにappearance: none;利用時に矢印を消す

2019.01.29

2019.04.17

どうもユーキです。

テキスト入力欄やセレクトボックスなどCSSでデザインを整えるときに、IE11のセレクトボックスだけ何故か右にある矢印がのこってしまいます。
それを消す方法をメモがてら記載します。

CSSの指定方法

まずは、appearanceの設定です。

input, select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

そして、チェックボックスの矢印を消す設定はこちらです。

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

これで見事にきえました！

IE10でも効くみたいです。お試しあれ！

About Me

ユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。

当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。
その他日々気になったこと、思ったことも書いてます。

お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。