CSS

セレクトボックスの矢印を消す方法【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でセレクトボックスの矢印が全て消えます!
セレクトボックをカスタマイズする際にぜひ試してみてください。

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)