【html&css】コピペで作る！おしゃれなテキストボックスデザイン例5選

2026年2月21日2026年2月24日

本記事では、おしゃれなテキストボックスデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに作ることができます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

おしゃれなフリー素材デザイン集

本サイトでは、テキストボックス以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

おしゃれな素材デザイン集

見出し
ボタン
ボックス
ローディング
リスト
吹き出し
アコーディオンメニュー
検索フォーム
セレクトボックス
パンくずリスト
テキストボックス
ツールチップ
Q&Aリスト
引用ボックス
レーダーチャート
「READ MORE」ボタン
タブボタン
トグルボタン
チェックボックス
フッター
付箋
ページネーション
円グラフ
ラジオボタン
目次
棒グラフ
モーダルウィンドウ
タイムライン（ステップバー）

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

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

ここでは、以下のシンプルなテキストボックスデザイン例を記載しています。

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

枠線あり
背景色あり
枠線＆背景色

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もテキストボックスページでは選択式でご用意しました。

調整項目一覧

枠線の色
文字色
タグの種類：<input>タグ, <textarea>タグ
形状：四角, 角丸
ラベル：あり, なし

ご興味があれば「テキストボックス一覧ページ」を一読ください。

ダークモード対応のテキストボックスデザイン例も記載していますので、ぜひご参照ください。

枠線あり

ラベルの例

HTMLコード表示

<label class="textbox-1-label" for="textbox-1-id">ラベルの例</label>
<input type="text" id="textbox-1-id" class="textbox-1" placeholder="テキストボックスの例">

CSSコード表示

.textbox-1-label,
.textbox-1 {
  color: #333333;
}

.textbox-1-label {
  display: block;
  margin-bottom: 5px;
  font-size: .9em;
}

.textbox-1 {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #969da3;
  border-radius: 3px;
  background: #fff;
  font-size: 1em;
  line-height: 1.5;
  box-sizing: border-box;
}

.textbox-1::placeholder {
  color: #999;
}

背景色あり

ラベルの例

HTMLコード表示

<label class="textbox-1-label" for="textbox-1-id">ラベルの例</label>
<input type="text" id="textbox-1-id" class="textbox-1" placeholder="テキストボックスの例">

CSSコード表示

.textbox-2-label,
.textbox-2 {
  color: #333333;
}

.textbox-2-label {
  display: block;
  margin-bottom: 5px;
  font-size: .9em;
}

.textbox-2 {
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 3px;
  background: #f7f7f7;
  font-size: 1em;
  line-height: 1.5;
  box-sizing: border-box;
}

.textbox-2::placeholder {
  color: #999;
}

枠線＆背景色

ラベルの例

HTMLコード表示

<label class="textbox-1-label" for="textbox-1-id">ラベルの例</label>
<input type="text" id="textbox-1-id" class="textbox-1" placeholder="テキストボックスの例">

CSSコード表示

.textbox-3-label,
.textbox-3 {
  color: #333333;
}

.textbox-3-label {
  display: block;
  margin-bottom: 5px;
  font-size: .9em;
}

.textbox-3 {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d2d2d2;
  border-radius: 3px;
  background: #f7f7f7;
  font-size: 1em;
  line-height: 1.5;
  box-sizing: border-box;
}

.textbox-3::placeholder {
  color: #999;
}