🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSSフォームデザインまとめ：input装飾・focus・ラジオ/チェックボックス

フォームは見た目よりも「入力しやすさ」と「どこを操作中か分かること」が重要です。装飾を加える場合も、フォーカス表示やラベルとの関係を崩さないようにします。

フォームの基本レイアウト

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
}

inputの基本装飾

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit;
}

focus時の枠色

フォーカス表示は消さずに、色や影で分かりやすくします。

input:focus,
textarea:focus {
  outline: 2px solid rgba(11, 99, 206, 0.25);
  border-color: #0b63ce;
}

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

appearance: none; で標準表示を消す場合は、チェック状態とキーボード操作時の見た目を必ず用意します。

input[type="checkbox"] {
  appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid #888;
  border-radius: 4px;
  vertical-align: middle;
}

input[type="checkbox"]:checked {
  background: #0b63ce;
  border-color: #0b63ce;
}

input[type="checkbox"]:focus {
  outline: 2px solid rgba(11, 99, 206, 0.25);
}