コピペで使えるCSSフォームデザイン集

ブラウザ標準の入力欄は、正直ちょっと事務的な見た目。でもフォームはページの中で唯一、相手が手を動かしてくれる場所です。入力したくなるフォームのデザインを、動くデモつきで8個まとめました。コピペして色を変えるだけです。

入力欄の基本

まずは基本の整え

余白・枠線・角丸の3点セット。これだけで「事務用品」が「デザインされた部品」になります。

input {
  padding: 12px 16px;
  font: inherit;
  border: 2px solid #ddd;
  border-radius: 10px;
}

font: inheritを忘れずに——入力欄は周りのフォントを引き継がないので、これが無いと文字だけ雰囲気がずれます。

フォーカスの合図

いま入力できる欄がどれか、クリックした瞬間に色でこたえると親切です。

input:focus {
  border-color: #ff8a3d;
  box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.2);
}

ラベルと縦積みレイアウト

「ラベルが上、入力欄が下」の縦積みは、目線が迷わない定番の並べ方です。

.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stack label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: bold;
}

すき間は全部gapで管理。項目を増やしても崩れません。

テキストエリア

感想欄・メッセージ欄の<textarea>は、縦だけ伸ばせるようにしておくと使いやすくなります。

textarea {
  min-height: 90px;
  resize: vertical;   /* 縦にだけ伸ばせる */
}

resize: verticalが無いと横にも伸ばせてしまい、レイアウトが崩れる原因になります。

ワンランク上の部品

丸い検索ボックス

入力欄とボタンをひとつのカプセルに合体させた、ヘッダーの定番部品です。

.search {
  display: flex;
  border: 2px solid #ddd;
  border-radius: 999px;
  overflow: hidden;
}
.search input { flex: 1; border: none; outline: none; }
.search button { border: none; }

枠線は外側の.searchに1つだけ持たせて、中の部品からは消す——「一体化」のタネはこれだけです。

チェックの色をそろえる：accent-color

チェックボックスやラジオの「青」は、じつは1行でテーマカラーに変えられます。

input {
  accent-color: #ff8a3d;
}

自作の見た目に置き換える方法もありますが、まずはこの1行で十分きれいにそろいます。

エラーの見せ方

「なにかが違う」は、赤い枠＋そばに一言のセットで伝えます。

input.error {
  border-color: #e5484d;
  background: #fff5f5;
}
.error-message {
  color: #e5484d;
  font-size: 12px;
}

色だけに頼らず文字のメッセージを必ずそえるのがポイント。何をどう直せばいいかまで書くと、もっと親切です。

完成形：ミニ問い合わせフォーム

ここまでの部品を組み合わせた完成形です。まるごとコピーして、自分のページの雛形にどうぞ。

まとめ

1. 入力欄は余白・枠線・角丸＋font: inheritの基本セットから
2. :focusの合図は必須。outlineを消すなら必ず代わりの合図を用意する
3. エラーは赤い枠＋文字のメッセージのセットで（色だけに頼らない）

フォームが心地よいと、メッセージをもらえる確率もちゃんと上がります。まずは基本の整えから試してみてください。