HTML・CSSでつくるセレクトボックスのデザイン6選

フォームとして沢山の選択肢を表示するのに最適なセレクトボックス。今回はそんなセレクトボックス(プルダウン)のおしゃれなデザインをまとめました。どれもコピペだけで再現できるものなのでぜひ取り入れてみてください。

シンプルなセレクトボックス

スタンダード

スタンダード

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状
矢印2つ

矢印2つ

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状
下線あり

下線あり

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

白背景 & シャドウ

白背景 & シャドウ

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状

カラフルなセレクトボックス

フラットデザイン

フラットデザイン

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状
枠線あり

枠線あり

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状