CSSフォームデザイン｜input・select・チェックボックス装飾

CSSのフォームデザインは、「リセット → 共通の見た目 → 状態（hover・focus・エラー・disabled）」の順に重ねると、少ないコードで全部品をそろえられます。 この記事では、input・textarea・select・checkbox・radio・ボタンの6部品を、HTML と CSS のセットで、状態ごとの見た目までそろえたコピペ集としてまとめました。

土台のリセットは :where() で詳細度を 0 にしてあるので、!important を1つも使わずに上書きできます。チェックボックスは accent-color の1行で済ませる版と、appearance: none で作り込む版を並べ、display: none で隠すとキーボードで操作できなくなる例も実際に動かして確かめました。:focus-visible、:user-invalid、field-sizing、ダークモード、コントラスト比は、Chromium 141 で取り出した値を載せています。

CSSフォームデザインの早見表

部品 × 状態のセレクタ

少ないCSSで済む方法

検証した環境とファイル構成

Firefox・Safari・iOS の実機での確認は行っていません（未実行）。該当する箇所はその都度明記します。

CSS は1つのファイル（form.css）で、この記事に出てくる CSS のコードブロックを上から順につなげると完成形になります。クラス名はすべて f- で始めてあり、既存のスタイルとぶつかりにくくしています。

土台：色の変数と!importantなしのリセット

色と基本値

/* ===== 1. 色と基本値（ライト／ダーク） ===== */
:root {
  color-scheme: light dark;
  --f-bg: light-dark(#ffffff, #111827);
  --f-text: light-dark(#1f2937, #f3f4f6);
  --f-muted: light-dark(#4b5563, #d1d5db);
  --f-border: light-dark(#6b7280, #9ca3af);
  --f-accent: light-dark(#1d4ed8, #93c5fd);
  --f-on-accent: light-dark(#ffffff, #111827);
  --f-error: light-dark(#b91c1c, #fca5a5);
  --f-disabled-bg: light-dark(#e5e7eb, #374151);
  --f-disabled-text: light-dark(#4b5563, #d1d5db);
  --f-radius: 8px;
}

color-scheme: light dark は、ライトとダークの両方に対応していることをブラウザに伝える宣言です。light-dark(ライトの色, ダークの色) は、そのときの配色に合う側を自動で選びます。色を変数にまとめておくと、ブランドの色に合わせるときは --f-accent の1行を変えるだけで済みます。

リセット

/* ===== 2. リセット（:where で詳細度 0） ===== */
:where(input, textarea, select, button) {
  box-sizing: border-box;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
:where(textarea) { resize: vertical; }
:where(button, select, label, input[type="checkbox"], input[type="radio"]) { cursor: pointer; }
:where(:disabled, :disabled + label) { cursor: not-allowed; }

フォーム部品は、初期状態では周りの文字の設定を引き継ぎません。body に font: 18px/1.6 serif と文字色を指定したページで、リセットの前後を取り出した結果です。

リセット前  input: 13.3333px Arial rgb(0, 0, 0) | textarea: 13.3333px monospace rgb(0, 0, 0) | select: 13.3333px Arial rgb(0, 0, 0) | button: 13.3333px Arial rgb(0, 0, 0)
リセット後  input: 18px serif rgb(10, 20, 30) | textarea: 18px serif rgb(10, 20, 30) | select: 18px serif rgb(10, 20, 30) | button: 18px serif rgb(10, 20, 30)

（各行の先頭のラベルは、読みやすいよう要素名に置き換えています。）リセット前は文字サイズが 13.3333px で、textarea だけ等幅フォントになっています。font: inherit と color: inherit の2行で、4つの部品がページの文字と同じ設定にそろいました。

:where() で包んであるのは、詳細度を 0 にするためです。リセットの後に input { color: rgb(200,0,0); } という要素セレクタ1つのルールを足したところ、input だけが rgb(200, 0, 0) に変わりました。

上書きが効かないときに !important を足すのではなく、土台の詳細度を下げておくのが、後から手を入れやすい作り方です。

項目の枠（ラベル・補足・エラー文）

<div class="f-field">
  <label class="f-label" for="email">メールアドレス</label>
  <input class="f-input" id="email" name="email" type="email" required autocomplete="email"
         aria-describedby="email-help email-error">
  <span class="f-help" id="email-help">返信先として使います。</span>
  <span class="f-error" id="email-error">メールアドレスの形式で入力してください。</span>
</div>

/* ===== 3. 項目の枠（ラベル・補足・エラー文） ===== */
.f-field { display: grid; gap: 6px; margin-block-end: 20px; }
.f-label { font-weight: 700; color: var(--f-text); }
.f-help  { font-size: 0.875rem; color: var(--f-muted); }
.f-error { display: none; font-size: 0.875rem; color: var(--f-error); }
.f-field:has(:user-invalid, [aria-invalid="true"]) .f-error { display: block; }
fieldset.f-field { margin-inline: 0; padding: 0; border: 0; min-inline-size: 0; }
legend.f-label { padding: 0; }

placeholder はラベルの代わりにはなりません。入力を始めると消えてしまうためです。ラベルは常に見える位置に置き、placeholder は入力例を添える用途に使います。

input・textarea・selectのデザイン

inputの HTML と CSS

<div class="f-field">
  <label class="f-label" for="name">お名前</label>
  <input class="f-input" id="name" name="name" type="text" required autocomplete="name"
         placeholder="例：山田 太郎" aria-describedby="name-error">
  <span class="f-error" id="name-error">お名前を入力してください。</span>
</div>

<div class="f-field">
  <label class="f-label" for="code">会員番号（変更できません）</label>
  <input class="f-input" id="code" name="code" type="text" value="M-00123" disabled>
</div>

/* ===== 4. input・textarea・select 共通 ===== */
.f-input, .f-select {
  inline-size: 100%;
  min-block-size: 44px;
  padding: 8px 12px;
  font-size: max(16px, 1rem);
  line-height: 1.5;
  color: var(--f-text);
  background-color: var(--f-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.f-input::placeholder { color: var(--f-muted); opacity: 1; }
.f-input:hover, .f-select:hover { border-color: var(--f-text); }
.f-input:focus-visible, .f-select:focus-visible {
  outline: 2px solid var(--f-accent);
  outline-offset: 2px;
  border-color: var(--f-accent);
}
.f-input:user-invalid, .f-select:user-invalid,
.f-input[aria-invalid="true"], .f-select[aria-invalid="true"] {
  border-color: var(--f-error);
  box-shadow: 0 0 0 1px var(--f-error);
}
.f-input:disabled, .f-select:disabled {
  color: var(--f-disabled-text);
  background-color: var(--f-disabled-bg);
  border-style: dashed;
}
.f-input:read-only:not(select) { background-color: var(--f-disabled-bg); }

状態ごとに取り出した値です（ライトモード）。

readonly を付けた入力欄は、枠は実線のまま、背景だけが disabled と同じ rgb(229, 231, 235) になります。

エラーと disabled は、色だけでなく形（太さ・破線）でも違いがわかるようにしてあります。色の見分けが付きにくい環境でも状態が伝わります。高さの 44px は、指で押しやすい大きさの目安として使われる値です。

textarea：入力量に合わせて伸ばす

<div class="f-field">
  <label class="f-label" for="body">内容</label>
  <textarea class="f-input" id="body" name="body" required aria-describedby="body-error"></textarea>
  <span class="f-error" id="body-error">内容を入力してください。</span>
</div>

/* textarea：入力量に合わせて伸びる */
textarea.f-input {
  min-block-size: 5lh;
  max-block-size: 14lh;
  field-sizing: content;
}

field-sizing: content は、入力欄の大きさを中身に合わせる指定です。lh は「1行分の高さ」を表す単位で、5lh は5行分になります。行の高さ 24px の textarea で、行数を変えて高さを測りました。

JavaScript なしで、入力量に応じて伸びる textarea になります。field-sizing に対応していないブラウザでは、5行分の高さのまま表示され、右下のつまみで縦に伸ばせます。

select：矢印を作り直す

<div class="f-field">
  <label class="f-label" for="topic">お問い合わせの種類</label>
  <select class="f-select" id="topic" name="topic" required aria-describedby="topic-error">
    <option value="">選択してください</option>
    <option value="order">注文について</option>
    <option value="member">会員登録について</option>
    <option value="other">その他</option>
  </select>
  <span class="f-error" id="topic-error">種類を選んでください。</span>
</div>

/* select：矢印を currentColor で描く */
.f-select {
  appearance: none;
  padding-inline-end: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

appearance: none でブラウザ標準の矢印を外し、2つの linear-gradient を組み合わせて下向きの三角を描いています。矢印の色に currentColor（文字色）を使っているので、ダークモードや disabled でも文字と同じ色に自動で変わります。 画像ファイルや SVG を用意する必要もありません。

先頭の「選択してください」は value="" にしてあります。required と組み合わせると、未選択のまま送信しようとしたときにエラー状態になります。開いたときの選択肢リストまでデザインできる新しい仕組み（appearance: base-select）は Chrome 135 以降など一部のブラウザから使えるようになっていますが、この記事では扱いません（未実行）。

チェックボックス・ラジオボタンのカスタム

方法は2つあります。色を変えるだけなら A、形や大きさまで決めたいなら B を選びます。

A：accent-colorの1行版

<label class="f-choice">
  <input class="f-accent" id="news" type="checkbox" name="news"> お知らせを受け取る
</label>

/* ===== 5. checkbox・radio（A: accent-color の1行版） ===== */
.f-accent { accent-color: var(--f-accent); inline-size: 1.25em; block-size: 1.25em; }

取り出した値は accentColor: rgb(29, 78, 216) / appearance: auto / width: 20px でした。ブラウザ標準の部品のまま、チェック時の色だけが変わります。大きさは inline-size と block-size で指定できます。accent-color は radio、range（スライダー）、progress にも効きます。

B：appearance:noneで作り込む版

<fieldset class="f-field">
  <legend class="f-label">連絡方法</legend>
  <label class="f-choice"><input class="f-radio" type="radio" name="contact" value="mail" checked> メール</label>
  <label class="f-choice"><input class="f-radio" type="radio" name="contact" value="tel"> 電話</label>
  <label class="f-choice"><input class="f-radio" type="radio" name="contact" value="post" disabled> 郵送（準備中）</label>
</fieldset>

<div class="f-field">
  <label class="f-choice">
    <input class="f-check" id="agree" type="checkbox" name="agree" required aria-describedby="agree-error">
    利用規約に同意する
  </label>
  <span class="f-error" id="agree-error">同意にチェックを入れてください。</span>
</div>

/* ===== 6. checkbox・radio（B: appearance:none の作り込み版） ===== */
.f-choice { display: flex; align-items: center; gap: 8px; min-block-size: 44px; color: var(--f-text); }
.f-check, .f-radio {
  appearance: none;
  flex: none;
  display: inline-grid;
  place-content: center;
  inline-size: 1.375em;
  block-size: 1.375em;
  background-color: var(--f-bg);
  border: 2px solid var(--f-border);
  transition: background-color 0.15s, border-color 0.15s;
}
.f-check { border-radius: 4px; }
.f-radio { border-radius: 50%; }
.f-check::before, .f-radio::before {
  content: "";
  inline-size: 0.75em;
  block-size: 0.75em;
  background-color: var(--f-on-accent);
  transform: scale(0);
  transition: transform 0.12s;
}
.f-check::before { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); }
.f-radio::before { border-radius: 50%; inline-size: 0.5em; block-size: 0.5em; }
.f-check:hover, .f-radio:hover { border-color: var(--f-text); }
.f-check:checked, .f-radio:checked { background-color: var(--f-accent); border-color: var(--f-accent); }
.f-check:checked::before, .f-radio:checked::before { transform: scale(1); }
.f-check:focus-visible, .f-radio:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }
.f-check:user-invalid, .f-check[aria-invalid="true"] { border-color: var(--f-error); }
.f-check:disabled, .f-radio:disabled { background-color: var(--f-disabled-bg); border-style: dashed; }
.f-check:disabled:checked::before, .f-radio:disabled:checked::before { background-color: var(--f-disabled-text); }
.f-choice:has(:disabled) { color: var(--f-disabled-text); }

仕組みは次のとおりです。

1. appearance: none で標準の見た目を外し、input 要素そのものに枠と背景を付ける
2. ::before でチェックマーク（clip-path で切り抜いた形）や丸を用意し、transform: scale(0) で隠しておく
3. :checked のときに背景をアクセント色にし、::before を scale(1) にして表示する

input を消さずにそのまま装飾しているので、Tab キーでの移動も Space キーでの切り替えも、何も足さずに動きます。 実際に #agree にフォーカスして Space キーを押したところ、checked: true になりました。ラジオボタンをまとめる fieldset と legend は、「連絡方法」というグループ名を読み上げに伝える役割を持ちます。

display:noneで隠すとキーボードで操作できなくなる

チェックボックスの装飾でよく見かけるのが、input を display: none で隠し、隣の要素に見た目を描く方法です。マウスでは問題なく動きますが、キーボードでは操作できなくなります。3つの書き方を並べて確かめました。

<input id="first" type="text">

<!-- 1. display:none で隠した版 -->
<label class="ng"><input id="ng" type="checkbox"><span>display:none で隠した版</span></label>

<!-- 2. 見た目だけ隠した版 -->
<label class="ok"><input id="ok" type="checkbox"><span>見た目だけ隠した版</span></label>

<!-- 3. appearance:none の版 -->
<input id="ap" type="checkbox" style="appearance:none;width:20px;height:20px;border:2px solid #6b7280">

<button id="last">送信</button>

.ng input { display: none; }

.ok input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ok input:focus-visible + span::before { outline: 2px solid #1d4ed8; outline-offset: 2px; }

.ng span::before, .ok span::before {
  content: "";
  display: inline-block;
  width: 1em; height: 1em;
  margin-right: 6px;
  border: 2px solid #6b7280;
  vertical-align: -3px;
}
.ng input:checked + span::before,
.ok input:checked + span::before { background: #1d4ed8; }

最初の入力欄から Tab キーを4回押し、フォーカスが移った先を記録した結果です。

Tab順: ok -> ap -> last -> BODY

display: none の版（ng）にはフォーカスが一度も移りませんでした。 JavaScript から focus() を呼んでもフォーカスは移らず、Space キーを押しても checked は false のままです。支援技術に渡される情報（アクセシビリティツリー）を出力すると、次のようになりました。

- textbox
- text: display:none で隠した版
- checkbox "見た目だけ隠した版" [checked]
- text: 見た目だけ隠した版
- checkbox
- button "送信"

1つ目はただの文字として扱われ、チェックボックスとして認識されていません。マウスでクリックした場合は checked: true になるため、マウスだけで確認していると気づきにくい点です。

直し方は、display: none を「見た目だけ隠す」指定に置き換えるか、B の appearance: none の書き方に切り替えることです。あわせて :focus-visible のスタイルを付け、いまどこにフォーカスがあるかを見えるようにします。

ボタンのデザイン

<button class="f-btn" type="submit">送信する</button>
<button class="f-btn f-btn--sub" type="reset">入力を消す</button>
<button class="f-btn" type="button" disabled>送信できません</button>

/* ===== 7. ボタン ===== */
.f-btn {
  min-block-size: 44px;
  padding: 8px 20px;
  font-size: max(16px, 1rem);
  font-weight: 700;
  color: var(--f-on-accent);
  background-color: var(--f-accent);
  border: 2px solid var(--f-accent);
  border-radius: var(--f-radius);
  transition: background-color 0.15s, transform 0.05s;
}
.f-btn:hover { background-color: color-mix(in srgb, var(--f-accent) 85%, var(--f-text)); }
.f-btn:active { transform: translateY(1px); }
.f-btn:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }
.f-btn:disabled {
  color: var(--f-disabled-text);
  background-color: var(--f-disabled-bg);
  border-color: var(--f-disabled-bg);
}
.f-btn--sub { color: var(--f-accent); background-color: transparent; }
.f-btn--sub:hover { background-color: color-mix(in srgb, var(--f-accent) 12%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .f-input, .f-select, .f-check, .f-radio, .f-btn,
  .f-check::before, .f-radio::before { transition: none; }
}

hover の色を color-mix() で作っているので、--f-accent を変えると hover の色も自動で付いてきます。最後の prefers-reduced-motion は、OS で「動きを減らす」を設定している人には変化の動きを付けない、という指定です。

:focus-visibleでフォーカス枠を出し分ける

:focus はクリックでもキーボードでも当たります。:focus-visible は、ブラウザが「フォーカス位置を見せたほうがよい」と判断したときだけ当たります。

ボタンをマウスでクリック   { focus: true, focusVisible: false, outline: 'none 0px' }
ボタンへTabキーで移動     { focus: true, focusVisible: true,  outline: 'solid 2px' }
inputをマウスでクリック    { focus: true, focusVisible: true,  outline: 'solid 2px' }

ボタンをクリックしたときに枠が残るのが気になって outline: none を指定すると、キーボードで操作する人がフォーカス位置を見失います。outline: none で消すのではなく、:focus-visible に枠を付ける形にすると、マウス操作では枠が出ず、キーボード操作では枠が出る、という両立ができます。

:user-invalidでエラー表示のタイミングを整える

:invalid は、条件を満たしていない入力欄にページを開いた瞬間から当たります。required の付いた空欄がすべて最初からエラー色になってしまうので、入力を終えてから当たる :user-invalid を使います。メールアドレス欄での変化を記録しました。

入力の途中では何も出ず、フォーカスを外した時点で初めてエラー表示になります。 また、すべて空のまま送信ボタンを押したところ、name・email・topic・body・agree の5つすべてに :user-invalid が当たりました。「送信しようとした」ことも、ユーザーの操作として扱われます。

サーバー側の検証結果を表示するときは、HTML に aria-invalid="true" を付けます。この記事の CSS は :user-invalid と [aria-invalid="true"] の両方に同じスタイルを当ててあるので、どちらの場合も同じ見た目になります。

iOSの16pxズームへの対応

iOS の Safari では、文字サイズが 16px より小さい入力欄にフォーカスすると、画面が自動で拡大される動きが広く知られています。この記事の CSS では、次の1行で対応しています。

.f-input, .f-select { font-size: max(16px, 1rem); }

max() は大きいほうを選ぶ関数です。ページの基準の文字サイズ（1rem）が 14px のように小さく設定されていても、入力欄は 16px を下回りません。Chromium では入力欄の文字サイズが 16px と取り出せることを確認しました。iOS の実機で拡大が起きないことの確認は、今回の環境では未実行です。

viewport の設定に maximum-scale=1 や user-scalable=no を入れて拡大そのものを止める方法は、文字を大きくして読みたい人の操作まで制限してしまうので、文字サイズの側で対応するのがおすすめです。

ダークモードとコントラスト比

冒頭の変数を light-dark() で定義してあるので、部品ごとのダークモード用の CSS は1行もありません。配色をダークにしたときの値です。

ページ全体の背景と文字色も合わせる場合は、body に次のように書きます。

body { color: var(--f-text); background: var(--f-bg); }

コントラスト比

コントラスト比は、2つの色の明るさの差を 1〜21 の数値で表したものです。WCAG（Web コンテンツのアクセシビリティ指針）では、文字は 4.5 以上、入力欄の枠線やフォーカス枠のような文字以外の部品は 3 以上が目安とされています。この記事の配色を計算式どおりに求めた結果です。

枠線の色は見落としやすい箇所です。白い背景に対して、明るいグレー #d1d5db は 1.47、#9ca3af は 2.54 で、どちらも 3 に届きません。入力欄の範囲が枠線だけで示されているデザインでは、#6b7280（4.83）程度の濃さにしておくと、明るい場所でも入力欄を見つけやすくなります。placeholder も同じ理由で、ブラウザ標準の薄い色のままにせず、補足文と同じ色を指定しています。

対応ブラウザ表

npm の @mdn/browser-compat-data 8.1.4（2026-10-01 付）から取り出した、最初に対応した版です。

accent-color には、Safari 15.4〜26.1 と Android 版 Chrome について「チェックマークが見やすくなるようなコントラストの自動調整を行わない」という注記があります。これらの環境では、チェックマークがはっきり見える濃さのアクセント色を選んでおくと安心です。

もっとも新しい条件が必要なのは light-dark() です。それより前の版も対象にするときは、変数の定義だけを次の形に置き換えます（この書き換え版は今回の検証の対象外で、未実行です）。

:root {
  color-scheme: light dark;
  --f-bg: #ffffff;
  --f-text: #1f2937;
  /* 残りの変数もライトの値で定義 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --f-bg: #111827;
    --f-text: #f3f4f6;
    /* 残りの変数をダークの値で上書き */
  }
}

つまずきやすい点と対処

よくある質問

Q. フォームのデザインは、どこから手を付ければよいですか？ A. リセット（font: inherit、box-sizing: border-box）を最初に置き、次に input・textarea・select に共通の枠・余白・文字サイズを決め、最後に hover・focus・エラー・disabled の状態を足していきます。この順番にすると、部品ごとの差分だけを書けば済みます。

Q. チェックボックスの色を変えるだけなら、いちばん短い書き方は何ですか？ A. accent-color: 色; の1行です。input 要素か、その親要素に指定します。形や大きさ、チェックマークまで決めたいときは、appearance: none で標準の見た目を外して作り込みます。

Q. :focus と :focus-visible はどちらを使えばよいですか？ A. フォーカス枠には :focus-visible を使います。ボタンをマウスでクリックしたときは当たらず、Tab キーで移動したときと、入力欄にフォーカスしたときに当たることを確かめました。枠を outline: none で消すだけにすると、キーボード操作でフォーカス位置がわからなくなります。

Q. エラーの見た目は、色を赤くするだけで十分ですか？ A. 色に加えて、枠を太くする、エラー文を表示する、といった色以外の手がかりも付けると、より多くの人に伝わります。この記事の CSS では、枠線の色・1px の影・エラー文の表示の3つを同時に切り替えています。

まとめ

• 「リセット → 共通の見た目 → 状態」の順に重ねると、6部品を1つの CSS でそろえられる
• リセットを :where() で包むと詳細度が 0 になり、!important なしで上書きできる
• チェックボックスの色だけなら accent-color の1行、形まで決めるなら appearance: none で input 自体を装飾する
• display: none で input を隠すと、Tab でも Space でも操作できなくなる。input は残したまま装飾する
• フォーカス枠は :focus-visible、エラー表示は :user-invalid にすると、出るタイミングが自然になる
• field-sizing: content で伸びる textarea、font-size: max(16px, 1rem) で iOS の拡大への対応ができる
• 色は light-dark() の変数にまとめ、コントラスト比は文字 4.5 以上・枠線 3 以上を目安に決める

株式会社RJCでは、CSSのフォームデザインをはじめとする画面づくりの知識を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。