CSS 表单美化

学习用CSS美化表单元素 · 难度：进阶 · +15XP

CSS 表单美化完全指南

HTML 表单默认样式在不同浏览器中差异很大且不够美观。通过 CSS 可以统一并美化表单元素，提升用户体验和品牌一致性。

基础输入框样式

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  box-sizing: border-box;
}
input:focus, textarea:focus {
  border-color: #4A90D9;
  box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.2);
}

表单布局模式

布局	特点	适用场景
垂直布局	标签在上，输入框在下	大多数表单（推荐）
水平布局	标签和输入框在同一行	筛选面板、设置页
浮动标签	placeholder 浮起变为标签	紧凑型移动端表单

垂直布局示例

.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
}
.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.form-group .help-text {
  font-size: 0.85em;
  color: #888;
  margin-top: 4px;
}

按钮样式

.btn-primary {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s, transform 0.1s;
}
.btn-primary:hover {
  background: #45a049;
}
.btn-primary:active {
  transform: scale(0.97);
}
.btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

自定义复选框和单选框

/* 隐藏原生控件 */
.custom-checkbox input[type="checkbox"] {
  display: none;
}
.custom-checkbox label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
.custom-checkbox label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background: white;
  transition: all 0.2s;
}
.custom-checkbox input:checked + label::before {
  background: #4CAF50;
  border-color: #4CAF50;
}
.custom-checkbox input:checked + label::after {
  content: '';
  position: absolute;
  left: 7px; top: 50%;
  transform: translateY(-60%) rotate(45deg);
  width: 6px; height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
}

验证状态样式

.input-success {
  border-color: #4CAF50;
}
.input-error {
  border-color: #f44336;
}
.error-message {
  color: #f44336;
  font-size: 0.85em;
  margin-top: 4px;
  display: none;
}
.input-error ~ .error-message {
  display: block;
}

综合表单示例

.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}
.form-title {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}
.form-footer {
  text-align: center;
  margin-top: 20px;
  color: #888;
}

移动端优化

1. 输入框字号至少 16px（防止 iOS 自动缩放）
2. 按钮最小点击区域 44x44px
3. 使用 inputmode 属性调出合适的键盘类型
4. 添加充足的间距，避免误触

好的表单设计应该是清晰、高效、友好的。减少用户思考负担，用清晰的标签、友好的错误提示和恰当的视觉反馈引导用户完成操作。