正在加载...

CSS 表单控件

表单是人们输入、选择和提交的地方。CSS 可以让 input、textarea 和 select 更清晰、更安静——可读的内边距、整齐的边框，以及真正看得见的焦点提示——同时由 HTML 保持语义。

表单控件工具箱

📊 表单控件一览

部件 日常作用
input / textarea / select 你要一起样式化的主要控件
padding + border 给字段空间和清晰边缘
border-radius 柔化圆角
:focus-visible 为键盘/指针显示焦点环
:disabled 淡化当前不可编辑的字段

一次样式化共享类（或元素组），让每个字段看起来属于同一家族。按钮外观留给下一课。

文本输入——空间与边缘

默认浏览器输入在不同设备上常常显得不一致。设置宽度、内边距、字号和浅色边框，让输入更舒适。

基础文本输入

css
CSS Code 
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Textarea——写作空间

Textarea 需要高度，以及与 input 相同的内边距语言。若预计长回答，允许垂直调整大小；若布局必须固定则锁定。

舒适的 textarea

css
CSS Code 
textarea {
width: 100%;
max-width: 24rem;
min-height: 7rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
resize: vertical;
}

Select——同一家族

下拉框应与文本字段共享边框、圆角和内边距，这样表单才不会像拼凑出来的。

同一家族的 select

css
CSS Code 
select {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

看得见的焦点

切勿在没有替代方案时去掉焦点样式。:focus-visible 为键盘用户画出清晰的环，并保持外观安静。

可见焦点环

css
CSS Code 
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
border-color: #0b5fff;
}

禁用字段

Disabled 控件应看起来不可用——更低的不透明度或淡化背景——同时不从布局中消失。

Disabled 色调

css
CSS Code 
input:disabled,
textarea:disabled,
select:disabled {
opacity: 0.6;
background: #f3f3f3;
cursor: not-allowed;
}

安静的字段习惯

保持共享字段样式，尊重标签间距，保留焦点，并把按钮外观留给 Buttons 一课。

共享字段类

css
CSS Code 
.field {
display: block;
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
}

.field:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

自己试试

  1. 用 padding、border 和 border-radius 样式化文本/邮箱输入。
  2. 对齐一个 textarea；设置 resize: vertical。
  3. 用同一边框家族样式化 select。
  4. 添加 :focus-visible 轮廓 + 边框色——不要留下裸露的 outline: none。
  5. 淡化一个 :disabled 输入，并确认它仍读作字段。

常见错误

  • 没有焦点替代就写 outline: none（键盘用户会迷失）
  • 过小的内边距/字号让手机输入很痛苦
  • 每个控件样式不同，表单显得随意
  • 把本课做成按钮设计（那是下一课）
  • 与表格的 border-collapse / 斑马纹混淆（上一会话）

小结

  • 共享的内边距、边框和圆角统一 input、textarea 和 select
  • 给 textarea 高度和合理的 resize
  • 保持可见的 :focus-visible 提示
  • 淡化 :disabled 字段；不要隐藏它们
  • 按钮外观留给下一课

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 33 的 35
Css 教程