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

Q: 入力前のアドバイス文字（プレースホルダー）はどこで変更できますか？

HTMLコード（inputタグ）の中にあるplaceholder="ここに入力してください"の日本語部分を書き換えることで、薄く表示される案内文字を自由に変更できます。

Q: 枠線の色や、入力中の枠線の色を変更することはできますか？

はい、可能です。 通常の枠線はCSSのborderで変更できます。 また、クリックして入力状態になった時の色はinput:focusという擬似クラス内のborder-colorやoutlineを変更することでカスタマイズできます。

Q: スマホで見たときにテキストボックスが画面からはみ出さないようにするには？

CSSでテキストボックスの幅をwidth: 100%;と指定し、box-sizing: border-box;を追記することで、スマホの画面幅に合わせて自動的に綺麗に収まる（レスポンシブ対応）ようになります。

Q: 1行ではなく、複数行を入力できる大きなボックスにしたい場合はどうすればいいですか？

複数行の入力欄を作りたい場合は、HTMLの<input type="text">の代わりに<textarea></textarea>タグを使用します。 当記事のCSSは、セレクタにtextareaを追加すればそのままデザインを適用できます。

2026年2月21日2026年6月13日

「枠線あり」「背景色あり」「枠線と背景色あり」の3パターンのシンプルなテキストボックスのデザイン例。

いつまで無駄なデザインに時間を費やしますか？自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

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

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

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

また、テキストボックス作成にはHTMLのinputタグを利用します。

inputタグの使い方を詳しく知りたい人は「【HTML】inputタグの使い方：type種類・属性一覧とCSS装飾・JS連携」を一読ください。

labelタグの使い方を詳しく知りたい人は「【HTML】labelタグの使い方：for属性の使い方や入力フォーム部品との連携」を一読ください。

【HTML】inputタグのtype種類一覧！属性の使い方とCSS装飾

HTMLのlabel（ラベル）タグの使い方！for属性の設定とフォーム連携

もう無駄なレイアウトに凝るのやめたら？最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

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

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

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

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

Code Stock

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

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

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

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

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

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

調整項目一覧

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

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

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

Code Stock

TEXT-BOX | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Simple Textbox シンプルなテキストボックスラベルの例枠線あり▼ ラベルの例背景色あり▼ …

枠線あり

ラベルの例

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;
}