CSS 表单样式

表单是网页收集信息的入口，登录、注册、搜索都靠它。默认的 input 和按钮样式简陋，CSS 能让表单整齐好看，交互也更友好。

表单的基础结构

一个完整表单由 form、label、input、textarea、button 组成。

<form>
  <div class="field">
    <label for="name">用户名</label>
    <input type="text" id="name" placeholder="请输入用户名">
  </div>
  <div class="field">
    <label for="email">邮箱</label>
    <input type="email" id="email" placeholder="name@example.com">
  </div>
  <button type="submit">提交</button>
</form>

label 的 for 指向 input 的 id，点击标签文字也能聚焦输入框。placeholder 显示灰色提示文字。

输入框的基本样式

.field {
  margin-bottom: 16px;
}
input[type="text"],
input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

width: 100% 让输入框撑满父容器，box-sizing: border-box 保证 padding 不撑大宽度，这在盒模型里讲过。边框浅灰加圆角，输入框立刻精致。

聚焦状态

用户点进输入框时，边框高亮，反馈更清晰。

input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

border-color 变蓝，外发光效果用 box-shadow 实现。:focus 是伪类的一种，选中获得焦点的元素。

label 的排列

标签放在输入框上面还是左边，用布局控制。

.field {
  display: flex;
  flex-direction: column;
}
.field label {
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 13px;
}

flex 竖向排列，标签在上输入框在下，移动端表单的标准布局。

文本框和选择框

textarea 和 select 也要统一风格。

textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;  /* 只允许垂直拉伸 */
}

select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}

textarea 默认可以任意拉伸，resize: vertical 限制只能上下拉。select 记得设背景白色，否则不同浏览器显示不一。

按钮样式

提交按钮和输入框配套。

button {
  width: 100%;
  padding: 12px;
  background: #3498db;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
button:hover {
  background: #2980b9;
}

去掉默认边框，蓝色底白字，悬停变深。cursor: pointer 让鼠标变手型，提示可点击。

必填和错误提示

给必填项加视觉标记。

.field label::after {
  content: "*";
  color: #e74c3c;
  margin-left: 2px;
}

用伪元素在每个标签后面加红色星号，提示必填。错误时给输入框加红色边框。

.field.error input {
  border-color: #e74c3c;
}

小结

表单样式从输入框入手，统一边框、内边距和圆角。:focus 加高亮反馈，label 用 flex 竖排，textarea 和 select 风格对齐，按钮与输入框配套。再配合伪元素标注必填项，一个专业表单就出来了。