セレクトボックスの矢印を消す方法【Chrome・IE・Firefox】

CSSでセレクトボックスの矢印を消す方法

CSSでセレクトボックスの矢印を消すことができます。
フォーム関係をカスタマイズで矢印を消したい場合ががよくありますよね。
そんなときこのようにリセットしてあげると矢印を消すことができます。

Chrome・Firefoxでセレクトボックスの矢印を消す

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

これだけでは、IEで矢印が消えません。
おのれ・・・IE・・・。
ということで上記のCSSの他に下記のCSSを追加してあげます。

IEでセレクトボックスの矢印を消す

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

これを追加するとIEでの矢印を非表示にできました！

まとめ

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

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

これでChrome・Firefox・IEでセレクトボックスの矢印が全て消えます！
セレクトボックをカスタマイズする際にぜひ試してみてください。