DOTLOG

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

どうもユーキです。

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

CSSの指定方法

まずは、appearanceの設定です。

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

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

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

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

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

COMMENTS

TOP