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

2026年2月21日2026年4月5日

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

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

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

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

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

【HTML】inputタグの使い方：type種類・属性一覧とCSS装飾・JS連携

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

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

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

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

Code Stock

Code Stock | UIコピペサイト UIコピペサイト

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

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

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

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

実際のデザインプレビューと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;
}