Ceryn

CSS 表单样式

6分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

CSS 表单

Styling web forms | MDN

引入

表单是用户输入信息的主要入口。

CSS 表单样式用来让输入框、按钮、提示和状态反馈更清楚，也能提升可用性。

正文

定义

定义

CSS 表单样式用于控制 <input>、<textarea>、<select>、<button> 等表单控件的显示效果。

表单样式不仅是为了好看，也要让用户知道哪里可以输入、当前焦点在哪里、哪些内容不可用或填写错误。

基础结构

<form class="login-form">
  <label for="email">邮箱</label>
  <input id="email" type="email" placeholder="请输入邮箱">
  <button type="submit">登录</button>
</form>
.login-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

常见控件

元素作用
<input>单行输入框、单选框、复选框等
<textarea>多行文本输入
<select>下拉选择
<button>按钮
<label>表单标签，说明输入内容

输入框样式

.field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 16px;
}

常见输入框样式通常包括：宽度、内边距、边框、圆角、字体大小。

font-size: 16px; 在移动端还有一个常见好处：可以减少某些浏览器自动放大输入框的问题。

焦点状态 :focus

:focus 用于选中当前正在输入或操作的表单元素。

.field:focus {
  border-color: #2563eb;
  outline: 2px solid #bfdbfe;
}

焦点样式很重要。

它可以让用户知道当前正在操作哪个输入框，对键盘用户也很有帮助。

占位文字 ::placeholder

.field::placeholder {
  color: #9ca3af;
}

placeholder 适合做简短提示，但不要用它替代 <label>。

因为用户输入内容后，占位文字会消失。

禁用状态 :disabled

.field:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

禁用状态表示这个控件当前不能操作。

样式上通常会让它变灰，并把鼠标改成 not-allowed。

只读状态 :read-only

.field:read-only {
  background-color: #f9fafb;
}

readonly 表示用户不能修改内容，但这个值仍然可以随表单提交。

它和 disabled 不一样，disabled 的控件通常不会提交。

校验状态 :valid 和 :invalid

<input class="field" type="email" required>
.field:invalid {
  border-color: #dc2626;
}
 
.field:valid {
  border-color: #16a34a;
}

:invalid 表示输入内容不符合表单规则。

:valid 表示输入内容符合规则。

实际项目中，不一定一开始就显示红色错误，通常会配合用户操作后的状态再展示。

按钮样式

.btn {
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background-color: #2563eb;
  color: white;
  cursor: pointer;
}
 
.btn:hover {
  background-color: #1d4ed8;
}

按钮要让用户一眼看出可以点击。

常见做法是设置背景色、文字颜色、内边距和悬停状态。

按钮禁用状态

.btn:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

禁用按钮应该明显区别于可点击按钮，避免用户误以为可以操作。

常见属性

属性作用
padding控制输入框和按钮内部空间
border设置控件边框
border-radius设置圆角
outline设置焦点轮廓
cursor设置鼠标样式
resize控制 <textarea> 是否可调整大小

例子

简单登录表单

<form class="form-card">
  <label for="username">用户名</label>
  <input id="username" class="field" type="text" placeholder="请输入用户名">
 
  <label for="password">密码</label>
  <input id="password" class="field" type="password" placeholder="请输入密码">
 
  <button class="btn" type="submit">提交</button>
</form>
.form-card {
  max-width: 360px;
  padding: 20px;
  border: 1px solid #e5e7eb;
}
 
.form-card label {
  display: block;
  margin-bottom: 6px;
}
 
.field {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}
 
.field:focus {
  border-color: #2563eb;
  outline: 2px solid #bfdbfe;
}
 
.btn {
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background-color: #2563eb;
  color: white;
}

特点

  • 表单样式要同时考虑美观和可用性
  • 输入框需要清楚的边框、间距和焦点状态
  • 按钮需要明显表达可点击
  • :focus、:disabled、:valid、:invalid 常用于表单状态样式
  • <label> 有助于说明输入内容，也有利于可访问性

注意事项

  • 不要直接去掉 outline，除非提供了新的焦点样式
  • placeholder 不能替代 <label>
  • 禁用状态要有明显视觉区别
  • 表单错误提示不要只依赖颜色，最好配合文字说明
  • 输入框宽度使用 width: 100%; 时，常配合 box-sizing: border-box;

理解

表单样式的核心是让用户顺利输入和提交。

一个好的表单应该让用户知道：要填什么、正在填哪里、哪里填错了、哪些按钮能点。

所以表单样式不只是装饰，更是交互反馈的一部分。

引出

学习表单状态样式时，可以继续结合 CSS 输入伪类，理解更多输入控件的状态选择方式。

关系图谱

反向链接