[CSS] セレクトボックスの矢印ボタンをIEで非表示にする

【この記事を読むのに必要な時間は約 1 分です】

セレクトボックスの右側にある矢印ボタン、野暮ったいですよね。タップすれば選択肢が出ることが直感的に分かるUIであれば、非表示にしておきたいところ。

IEの俺仕様のせいで appearance: none; が効かない場合の対処について。

-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none

これだけ書けばさすがにどのブラウザでも大丈夫だろう、と思いきやIEでは表示されてしまいます（Chrome/Safari/Firefoxは大丈夫）。

ちょっと面倒ですが、新しいバージョンのIEでは以下のように display : none を指定することで非表示にすることができます。

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

IEのためだけにCSSがゴチャっとするのは止めて欲しいものです。