[CSS]セレクトボックスでデフォルトで表示される矢印アイコンを消す方法

今回は「セレクトボックスでデフォルトで表示される矢印アイコンを消す方法」について紹介したいと思います。

矢印に別の画像を表示させたい時に便利です。

[CSS]セレクトボックスでデフォルトで表示される矢印アイコンを消す方法

完成形はこちらです。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

セレクトボックスのデフォルトで表示される矢印アイコンが消えていることが分かるでしょう。

それでは早速サンプルコードを見ていきましょう。

サンプルコード

HTMLコードはこちら。

そして、セレクトボックスに対して「appearance: none;」を指定することで、デフォルトで用意されている矢印アイコンを消すことができます。

簡単なので是非参考にしてみてください。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事