以前にselectのデザインを変更するやフォーム要素のスタイルをリセットするの記事内で、IE以外でselectboxの矢印を消す方法を紹介しましたが、IEでもselectboxの矢印を消す方法があるようだったので試してみました。
サンプルコード
例として、通常のselectboxと矢印を非表示にしたselectboxそれぞれ表示してみます。
1 2 3 4 5 6 | <select> <option>通常のselectbox</option></select><select class="custom-select"> <option>調整後のselectbox</option></select> |
.custom-selectに対して設定を行います。
1 2 3 | .custom-select::-ms-expand { display: none;} |
これでIEで矢印が非表示になりました。
IEでselectboxの矢印を非表示にするデモページ
前述の記事でも紹介しましたが、appearanceでIE以外での矢印の非表示ができるので、合わせて設定してみます。
1 2 3 4 5 6 7 8 | .custom-select { -webkit-appearance: none; -moz-appearance: none; appearance: none;}.custom-select::-ms-expand { display: none;} |
これで各ブラウザでselectboxの矢印を非表示にすることができました。
selectboxの矢印を非表示にするデモページ
背景画像やCSSでの装飾を組み合わせることで、selectboxのデザイン変更も可能です。
コメントが承認されるまで時間がかかります。