フォームは、ユーザーが直接入力する大切なUIです。
見た目を整えるだけでなく、ラベル、余白、フォーカス、エラー表示、スマホでの入力しやすさまで考えると、使いやすいフォームになります。
この記事では、CSSで使えるフォームデザインを20個まとめました。input、textarea、select、チェックボックス、ラジオボタン、検索フォーム、エラー表示などをそのままコピーして使える形で紹介します。
1. 基本の入力フォーム
まずは、ラベルと入力欄を縦に並べる基本形です。
<label class="form-field-basic">
<span>お名前</span>
<input type="text" placeholder="山田 太郎">
</label>.form-field-basic {
display: grid;
gap: 8px;
font-weight: 700;
}
.form-field-basic input {
width: 100%;
padding: 12px 14px;
font: inherit;
border: 1px solid #d1d5db;
border-radius: 6px;
}入力欄は width: 100%; にしておくと、スマホでも扱いやすくなります。
2. フォーカスが見える入力フォーム
入力中の場所がわかるように、:focus の見た目を用意します。
<label class="form-field-focus">
<span>メールアドレス</span>
<input type="email" placeholder="mail@example.com">
</label>.form-field-focus {
display: grid;
gap: 8px;
}
.form-field-focus input {
width: 100%;
padding: 12px 14px;
font: inherit;
border: 1px solid #cbd5e1;
border-radius: 6px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-field-focus input:focus {
border-color: #2563eb;
outline: 0;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}outline を消す場合は、代わりに box-shadow などでフォーカス状態を必ず見せます。
3. textareaの長文入力フォーム
お問い合わせ内容や備考欄には、複数行入力できる textarea を使います。
<label class="form-field-textarea">
<span>お問い合わせ内容</span>
<textarea rows="6" placeholder="ご相談内容をご入力ください"></textarea>
</label>.form-field-textarea {
display: grid;
gap: 8px;
}
.form-field-textarea textarea {
width: 100%;
min-height: 160px;
padding: 12px 14px;
font: inherit;
line-height: 1.7;
resize: vertical;
border: 1px solid #d1d5db;
border-radius: 6px;
}
.form-field-textarea textarea:focus {
border-color: #2563eb;
outline: 3px solid rgba(37, 99, 235, 0.18);
}resize: vertical; にすると、横方向に崩れず縦方向だけ調整できます。
4. selectの基本デザイン
セレクトボックスも、入力欄と同じ余白・枠線にするとフォーム全体がそろいます。
<label class="form-field-select">
<span>お問い合わせ種別</span>
<select>
<option>選択してください</option>
<option>ご相談</option>
<option>お見積もり</option>
</select>
</label>.form-field-select {
display: grid;
gap: 8px;
}
.form-field-select select {
width: 100%;
padding: 12px 14px;
font: inherit;
color: #111827;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 6px;
}まずはブラウザ標準の見た目を活かして、余白だけ整えるのがおすすめです。
5. 矢印を整えたselect
セレクトの矢印をCSSで整えると、他の入力欄となじみやすくなります。
<label class="form-field-select-arrow">
<span>希望プラン</span>
<select>
<option>ライト</option>
<option>スタンダード</option>
<option>ビジネス</option>
</select>
</label>.form-field-select-arrow {
display: grid;
gap: 8px;
}
.form-field-select-arrow select {
width: 100%;
padding: 12px 42px 12px 14px;
font: inherit;
color: #111827;
appearance: none;
background:
linear-gradient(45deg, transparent 50%, #64748b 50%) right 18px center / 7px 7px no-repeat,
linear-gradient(135deg, #64748b 50%, transparent 50%) right 12px center / 7px 7px no-repeat,
#fff;
border: 1px solid #d1d5db;
border-radius: 6px;
}矢印分の余白として、右側の padding を広めにします。
6. 標準チェックボックスを整える
チェックボックスは、まず標準のUIを活かして余白を整えると安全です。
<label class="form-check-basic">
<input type="checkbox">
<span>利用規約に同意します</span>
</label>.form-check-basic {
display: flex;
gap: 10px;
align-items: flex-start;
line-height: 1.7;
cursor: pointer;
}
.form-check-basic input {
margin-top: 0.35em;
}テキストが複数行になっても読みやすいように、align-items: flex-start; にします。
7. カスタムチェックボックス
見た目をそろえたい場合は、チェックボックスをカスタムできます。
<label class="form-check-custom">
<input type="checkbox">
<span>メールでお知らせを受け取る</span>
</label>.form-check-custom {
display: inline-flex;
gap: 10px;
align-items: center;
cursor: pointer;
}
.form-check-custom input {
display: grid;
place-content: center;
width: 20px;
height: 20px;
margin: 0;
appearance: none;
border: 2px solid #cbd5e1;
border-radius: 5px;
}
.form-check-custom input::before {
width: 10px;
height: 10px;
content: "";
transform: scale(0);
transition: transform 0.15s;
background: #2563eb;
border-radius: 2px;
}
.form-check-custom input:checked::before {
transform: scale(1);
}
.form-check-custom input:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.18);
}カスタムするときも、フォーカス状態は必ず残します。
8. ラジオボタンの選択肢
1つだけ選ばせたい項目には、ラジオボタンを使います。
<div class="form-radio-group">
<label>
<input type="radio" name="plan" checked>
<span>ライト</span>
</label>
<label>
<input type="radio" name="plan">
<span>スタンダード</span>
</label>
<label>
<input type="radio" name="plan">
<span>ビジネス</span>
</label>
</div>.form-radio-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.form-radio-group label {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 10px 14px;
cursor: pointer;
border: 1px solid #d1d5db;
border-radius: 9999px;
}
.form-radio-group input {
margin: 0;
}name を同じにすると、そのグループ内で1つだけ選択できます。
9. 必須ラベルつきフォーム
必須項目は、ラベルの横に小さなバッジを付けると伝わりやすいです。
<label class="form-field-required">
<span class="form-label">
お名前
<span class="required-badge">必須</span>
</span>
<input type="text">
</label>.form-field-required {
display: grid;
gap: 8px;
}
.form-label {
display: inline-flex;
gap: 8px;
align-items: center;
font-weight: 700;
}
.required-badge {
padding: 2px 7px;
color: #fff;
font-size: 12px;
background: #dc2626;
border-radius: 9999px;
}
.form-field-required input {
width: 100%;
padding: 12px 14px;
font: inherit;
border: 1px solid #d1d5db;
border-radius: 6px;
}バッジの種類を増やす場合は、CSSバッジ・ラベル・タグデザイン集 と内部リンクできます。
10. 補足テキストつきフォーム
入力ルールや注意書きは、入力欄のすぐ近くに置くと親切です。
<label class="form-field-help">
<span>パスワード</span>
<input type="password">
<small>8文字以上で入力してください。</small>
</label>.form-field-help {
display: grid;
gap: 8px;
}
.form-field-help input {
width: 100%;
padding: 12px 14px;
font: inherit;
border: 1px solid #d1d5db;
border-radius: 6px;
}
.form-field-help small {
color: #64748b;
font-size: 13px;
line-height: 1.6;
}補足は薄い色にしつつ、読めるサイズを保ちます。
11. エラー表示つきフォーム
エラーは色だけでなく、文章でも理由を伝えます。
<label class="form-field-error">
<span>メールアドレス</span>
<input type="email" value="sample" aria-describedby="mail-error">
<small id="mail-error">メールアドレスの形式で入力してください。</small>
</label>.form-field-error {
display: grid;
gap: 8px;
}
.form-field-error input {
width: 100%;
padding: 12px 14px;
font: inherit;
border: 1px solid #dc2626;
border-radius: 6px;
}
.form-field-error input:focus {
outline: 3px solid rgba(220, 38, 38, 0.18);
}
.form-field-error small {
color: #dc2626;
font-size: 14px;
}aria-describedby で、入力欄とエラーメッセージの関係を示しています。
12. 成功状態のフォーム
入力が正しいことを示したい場合は、成功状態の見た目も用意できます。
<label class="form-field-success">
<span>メールアドレス</span>
<input type="email" value="mail@example.com">
<small>入力形式は正しいです。</small>
</label>.form-field-success {
display: grid;
gap: 8px;
}
.form-field-success input {
width: 100%;
padding: 12px 14px;
font: inherit;
border: 1px solid #16a34a;
border-radius: 6px;
}
.form-field-success small {
color: #15803d;
font-size: 14px;
}成功状態も色だけではなく、短いテキストを添えるとわかりやすくなります。
13. 入力欄とボタンを横並びにする
メール登録やクーポン入力のような短いフォームに使えます。
<form class="form-inline">
<input type="email" placeholder="メールアドレス">
<button type="submit">登録する</button>
</form>.form-inline {
display: flex;
gap: 10px;
}
.form-inline input {
flex: 1;
min-width: 0;
padding: 12px 14px;
font: inherit;
border: 1px solid #d1d5db;
border-radius: 6px;
}
.form-inline button {
padding: 12px 18px;
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
background: #2563eb;
border: 0;
border-radius: 6px;
}
@media (max-width: 600px) {
.form-inline {
flex-direction: column;
}
}ボタンの種類を増やす場合は、CSSボタンデザイン集 と内部リンクできます。
14. 2列レイアウトのフォーム
名前とメールなど、短い入力欄をPCで2列に並べる例です。
<div class="form-grid-2">
<label>
<span>お名前</span>
<input type="text">
</label>
<label>
<span>メールアドレス</span>
<input type="email">
</label>
</div>.form-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.form-grid-2 label {
display: grid;
gap: 8px;
}
.form-grid-2 input {
width: 100%;
padding: 12px 14px;
font: inherit;
border: 1px solid #d1d5db;
border-radius: 6px;
}
@media (max-width: 600px) {
.form-grid-2 {
grid-template-columns: 1fr;
}
}スマホでは1列に戻すと、入力欄が狭くなりません。
15. 検索フォーム
サイト内検索や絞り込みに使いやすい、横長の検索フォームです。
<form class="form-search">
<input type="search" placeholder="キーワードで検索">
<button type="submit">検索</button>
</form>.form-search {
display: flex;
overflow: hidden;
border: 1px solid #d1d5db;
border-radius: 9999px;
}
.form-search input {
flex: 1;
min-width: 0;
padding: 12px 16px;
font: inherit;
border: 0;
}
.form-search input:focus {
outline: 0;
}
.form-search button {
padding: 0 20px;
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
background: #111827;
border: 0;
}外側のフォームに枠線を持たせると、検索窓らしいまとまりが出ます。
16. 入力欄にアイコン風の文字を付ける
通貨や単位を入力欄の横に置きたいときの形です。
<label class="form-addon">
<span>月額料金</span>
<span class="addon-box">
<span>¥</span>
<input type="number" placeholder="3000">
</span>
</label>.form-addon {
display: grid;
gap: 8px;
}
.addon-box {
display: flex;
overflow: hidden;
border: 1px solid #d1d5db;
border-radius: 6px;
}
.addon-box span {
display: grid;
place-items: center;
padding: 0 14px;
color: #64748b;
background: #f8fafc;
border-right: 1px solid #d1d5db;
}
.addon-box input {
flex: 1;
min-width: 0;
padding: 12px 14px;
font: inherit;
border: 0;
}単位や記号を入力値と分けると、ユーザーが入力する内容が明確になります。
17. ファイル選択フォーム
画像や資料のアップロード欄も、余白と枠線を整えるだけで見やすくなります。
<label class="form-file">
<span>ファイルを選択</span>
<input type="file">
</label>.form-file {
display: grid;
gap: 8px;
}
.form-file input {
width: 100%;
padding: 12px;
font: inherit;
background: #f8fafc;
border: 1px dashed #94a3b8;
border-radius: 8px;
}
.form-file input::file-selector-button {
margin-right: 12px;
padding: 8px 12px;
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
background: #2563eb;
border: 0;
border-radius: 6px;
}::file-selector-button で、ファイル選択ボタン部分を装飾できます。
18. フローティングラベル風フォーム
入力欄の中にラベルを浮かせるように見せるデザインです。
<label class="form-floating">
<input type="text" placeholder=" ">
<span>お名前</span>
</label>.form-floating {
position: relative;
display: block;
}
.form-floating input {
width: 100%;
padding: 20px 14px 8px;
font: inherit;
border: 1px solid #d1d5db;
border-radius: 6px;
}
.form-floating span {
position: absolute;
top: 14px;
left: 14px;
color: #64748b;
pointer-events: none;
transition: 0.2s;
}
.form-floating input:focus + span,
.form-floating input:not(:placeholder-shown) + span {
top: 6px;
font-size: 12px;
color: #2563eb;
}この方法では placeholder=" " が必要です。通常のラベルの方がわかりやすい場面も多いです。
19. フォーム全体をカードにする
お問い合わせフォーム全体をカード化すると、ページ内で入力エリアが見つけやすくなります。
<form class="form-card">
<label>
<span>お名前</span>
<input type="text">
</label>
<label>
<span>お問い合わせ内容</span>
<textarea rows="5"></textarea>
</label>
<button type="submit">送信する</button>
</form>.form-card {
display: grid;
gap: 18px;
max-width: 640px;
padding: 24px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.form-card label {
display: grid;
gap: 8px;
}
.form-card input,
.form-card textarea {
width: 100%;
padding: 12px 14px;
font: inherit;
border: 1px solid #d1d5db;
border-radius: 6px;
}
.form-card button {
padding: 13px 18px;
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
background: #2563eb;
border: 0;
border-radius: 6px;
}フォーム全体の余白は、入力欄同士の余白より広めに取ると見やすくなります。
20. CSS変数で色を変えやすいフォーム
複数ページで使い回すフォームは、色や角丸をCSS変数にしておくと調整しやすいです。
<label class="form-field-variable">
<span>会社名</span>
<input type="text" placeholder="サンプル株式会社">
</label>.form-field-variable {
--form-main: #0f766e;
--form-border: #cbd5e1;
--form-radius: 6px;
display: grid;
gap: 8px;
}
.form-field-variable input {
width: 100%;
padding: 12px 14px;
font: inherit;
border: 1px solid var(--form-border);
border-radius: var(--form-radius);
}
.form-field-variable input:focus {
border-color: var(--form-main);
outline: 3px solid rgba(15, 118, 110, 0.18);
}色を変えたいときは、--form-main とフォーカス時の rgba() を同系色にします。
フォームデザインで失敗しやすいポイント
- ラベルがなく、何を入力する欄かわかりにくい
outline: none;だけを指定して、フォーカス状態が消えている- 入力欄の高さが低く、スマホでタップしづらい
- エラーを色だけで伝えている
- PCでは横並びでも、スマホで入力欄が狭くなっている
フォームを作るときの基本方針
- ラベルと入力欄はセットで置く
- 入力欄、テキストエリア、セレクトの見た目をそろえる
- フォーカス、エラー、補足テキストを用意する
- スマホでは基本的に1列にする
- 送信ボタンは押せる見た目にする
まとめ
CSSフォームデザインは、装飾よりも入力しやすさを優先するのが大切です。
まずは基本の入力欄、フォーカス、エラー表示、チェックボックス、送信ボタンを整え、必要に応じて検索フォームや2列レイアウトに広げると、実務で使いやすいフォームになります。