CSS 表单

下面是一份关于 CSS 表单（Form）样式 的中文详解，涵盖表单布局、常用控件样式、交互状态、校验提示及最佳实践，帮助你快速美化和优化表单。

---

一、表单布局基础

1. 垂直/水平排列

• Flex 布局：.form-row { display: flex; flex-wrap: wrap; gap: 1rem; } .form-row .field { flex: 1 1 200px; }
• Grid 布局：.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

2. 标签与控件对齐

.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

---

二、输入框（input / textarea）样式

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #5b9dd9;
  box-shadow: 0 0 0 3px rgba(91, 157, 217, 0.3);
}

• box-sizing: border-box;：建议全局设置，避免 padding 扩大宽度。

---

三、下拉框（select）与单／多选控件

select {
  appearance: none; /* 清除系统样式 */
  background: url("data:image/svg+xml;...") no-repeat right 1rem center;
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #5b9dd9; /* 现代浏览器自定义色彩 */
}

• 可用伪元素模拟自定义样式，或使用 SVG 背景。

---

四、按钮（button / input[type="submit"]）样式

button,
input[type="submit"] {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background: #5b9dd9;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover,
input[type="submit"]:hover {
  background: #4a89c2;
}

button:disabled,
input[disabled] {
  background: #aaa;
  cursor: not-allowed;
}

---

五、表单校验状态

利用 HTML5 原生校验伪类：

input:invalid {
  border-color: #e53e3e;
}

input:valid {
  border-color: #38a169;
}

input:required:focus:invalid {
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.3);
}

• 可结合 :placeholder-shown、::-webkit-validation-bubble 做更精细的提示。

---

六、占位符与提示文字

input::placeholder,
textarea::placeholder {
  color: #888;
  font-style: italic;
}

---

七、Fieldset 与 Legend

fieldset {
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
}
legend {
  padding: 0 0.5rem;
  font-weight: 600;
}

---

八、可访问性（A11Y）与最佳实践

1. 关联控件与标签：<label for="id"> or 包裹 <input>。
2. ARIA 提示：aria-required="true"、aria-invalid="true"、role="alert"。
3. 视觉焦点：保证 :focus 样式足够明显。
4. 键盘操作：确保所有交互元素可通过 Tab 键聚焦。

---

九、响应式与小技巧

• 流式宽度：所有表单控件 width: 100%;，外层容器用 Flex/Grid 控制列数。
• 组合控件：如带图标的输入框，可用相对定位和内边距法。
• 统一风格：全局重置 input, button, select, textarea { font-family: inherit; } 保持与正文一致。
• 轻量动画：交互时可对 border-color、box-shadow 加入 transition，提升体验。

---

通过以上样式和结构，你即可快速搭建一个 美观、响应式且可访问 的表单。如果你有更具体的场景（例如：分步表单、多列复杂布局、动态增减字段等），欢迎进一步说明，我可以提供针对性示例！