IEでselectboxの矢印を非表示にする

2020.02.28

以前にselectのデザインを変更するやフォーム要素のスタイルをリセットするの記事内で、IE以外でselectboxの矢印を消す方法を紹介しましたが、IEでもselectboxの矢印を消す方法があるようだったので試してみました。

サンプルコード

例として、通常のselectboxと矢印を非表示にしたselectboxそれぞれ表示してみます。

<select>
	<option>通常のselectbox</option>
</select>
<select class="custom-select">
	<option>調整後のselectbox</option>
</select>

.custom-selectに対して設定を行います。

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

前述の記事でも紹介しましたが、appearanceでIE以外での矢印の非表示ができるので、合わせて設定してみます。

.custom-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.custom-select::-ms-expand {
	display: none;
}

これで各ブラウザでselectboxの矢印を非表示にすることができました。
selectboxの矢印を非表示にするデモページ
背景画像やCSSでの装飾を組み合わせることで、selectboxのデザイン変更も可能です。

参考サイト

土