Klein's-blue的博客

记录生活，分享技术

0%

表格与表单样式

CSS 表格与表单样式（2025-2026 主流实用版）

重点：现代表格样式、表单控件重置与美化、焦点态、无障碍可访问性
当前推荐日期参考：2026年1月

1. 表格（table）样式最佳实践

1.1 表格常用属性对比

属性 常用值 作用说明 推荐场景
border-collapse collapse（推荐） / separate 是否合并相邻单元格边框 绝大多数现代表格
border-spacing 0 / 8px / 1rem 单元格间距（仅 separate 生效） 网格感强、卡片式表格
table-layout auto（默认） / fixed 宽度计算方式 fixed 更可预测、适合大数据表
empty-cells show（默认） / hide 是否显示空单元格边框 很少用 hide
caption-side top（默认） / bottom 表格标题位置 —

2025-2026 推荐表格基础样式（强烈建议全局使用）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* 现代表格通用样式 */
.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;           /* 或 fixed，看需求 */
  font-variant-numeric: tabular-nums;  /* 数字对齐更美观 */
}

.table th,
.table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.table th {
  background: var(--gray-100);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--gray-700);
}

/* 斑马纹（可选，提升可读性） */
.table tr:nth-child(even) {
  background: var(--gray-50);
}

/* 悬停效果 */
.table tr:hover {
  background: var(--hover-bg);
  transition: background 0.15s;
}

/* 响应式表格 - 横向滚动 */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

1.2 常见表格模式

  • 极简线框：只用 border-bottom
  • 全边框网格：border-collapse: collapse + 1px 边框
  • 卡片式：不使用 table，使用 grid/flex + 响应式断点

2. 表单控件重置与美化（2025-2026 主流做法）

2.1 表单全局重置（强烈推荐）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 去除浏览器默认样式，统一起点 */
input,
button,
select,
textarea {
  appearance: none;               /* 移除系统默认外观 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
}

/* 按钮重置 */
button,
[type="button"],
[type="submit"],
[type="reset"] {
  cursor: pointer;
}

2.2 现代输入框（input/text、textarea）美化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* 通用输入框样式 */
.input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

/* 焦点态（可用性 + 无障碍关键） */
.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-100);  /* 推荐 2~4px 外环 */
  background: white;
}

/* 占位符美化 */
.input::placeholder {
  color: var(--gray-400);
  opacity: 1;
}

/* 禁用态 */
.input:disabled,
.input[readonly] {
  background: var(--gray-100);
  opacity: 0.7;
  cursor: not-allowed;
}

2.3 单选（radio）与复选（checkbox）美化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/* 隐藏原生控件 */
[type="radio"],
[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 自定义外观 */
.custom-radio,
.custom-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

.custom-radio input + span,
.custom-checkbox input + span {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  border: 2px solid var(--gray-400);
  border-radius: 50%;                     /* radio 用 50%，checkbox 用 4px */
  transition: all 0.2s;
}

/* 选中状态 */
.custom-radio input:checked + span,
.custom-checkbox input:checked + span {
  border-color: var(--primary);
}

.custom-radio input:checked + span::after,
.custom-checkbox input:checked + span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.625rem;
  height: 0.625rem;
  background: var(--primary);
  border-radius: 50%;
}

/* checkbox 专用：打勾样式 */
.custom-checkbox input:checked + span::after {
  content: "✓";
  font-size: 0.9rem;
  color: white;
  line-height: 1;
  background: var(--primary);
  border-radius: 2px;
}

2.4 下拉菜单（select）美化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 现代下拉美化 */
select {
  appearance: none;
  background: var(--input-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%236366f1' d='M6 9L2 5h8z'/></svg>") no-repeat right 1rem center/8px;
  padding-right: 2.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
}

select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-100);
  outline: none;
}

3. 焦点态与无障碍（Accessibility）关键点

核心原则：永远不要 outline: none 而不提供替代焦点指示

推荐焦点态写法（2025-2026 共识）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 通用焦点指示器（符合 WCAG） */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-200);
  border-radius: var(--radius-sm);
}

/* 按钮/链接等交互元素 */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  box-shadow: 0 0 0 3px var(--primary-100);
}

/* 高对比度模式友好 */
@media (prefers-contrast: more) {
  :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}

表单无障碍快速检查表：

  • 使用 <label> + for 关联
  • aria-invalid="true" + aria-describedby 错误提示
  • 必填使用 required + 视觉星号
  • 所有控件有清晰 :focus-visible 状态
  • 颜色对比度 ≥ 4.5:1（文本） / 3:1（大文本）

4. 总结：2025-2026 表单表格推荐组合

  • 表格：border-collapse + border-bottom + 斑马纹 + 响应式 wrapper
  • 输入框：appearance:none + border-radius + 3px focus ring
  • 单选/复选：隐藏原生 + 自定义 span + :checked 伪类
  • 下拉：appearance:none + 自定义箭头 svg
  • 焦点：永远使用 :focus-visible + box-shadow ring
  • 无障碍：label关联 + aria-* + 对比度 + 键盘可达