［CSS］セレクトボックスでデフォルトで表示される矢印アイコンを消す方法
今回は「セレクトボックスでデフォルトで表示される矢印アイコンを消す方法」について紹介したいと思います。
矢印に別の画像を表示させたい時に便利です。
［CSS］セレクトボックスでデフォルトで表示される矢印アイコンを消す方法
完成形はこちらです。
See the Pen
Untitled by webis (@webis-co)
on CodePen.
セレクトボックスのデフォルトで表示される矢印アイコンが消えていることが分かるでしょう。
それでは早速サンプルコードを見ていきましょう。
サンプルコード
HTMLコードはこちら。
<select>
<option value="">選択１</option>
<option value="">選択2</option>
<option value="">選択3</option>
<option value="">選択4</option>
</select>
そして、セレクトボックスに対して「appearance: none;」を指定することで、デフォルトで用意されている矢印アイコンを消すことができます。
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
簡単なので是非参考にしてみてください。
DOWNLOAD
ブログ用WordPressテーマを無料配布中
実務で使える構成・設計をベースにしたテーマです。
すぐにブログ運用を始めたい方はこちらからダウンロードできます。
Webサイトの集客や導線設計でお悩みではありませんか？
当社では、データ分析（GA4・検索データ）をもとに、
成果につながるWeb制作・改善をご提案しています。
課題の整理からでも大丈夫ですので、まずはお気軽にご相談ください。
無料で相談する
Author：
Profile：
大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。
この著者の記事を見る
