HTML・CSSでつくるテキストボックス(テキストエリア)のデザイン5選

フォームを実装する際に必須になってくるテキストボックス(テキストエリア)のデザインをまとめました。全てのパーツがコピペ可能で、色・幅・角丸・文字サイズなどの調整も可能になっています。

シンプルなテキストボックス

枠線あり

枠線あり

  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

デザインを調整する

  • タグの種類
  • 形状
  • ラベル