CSS 表单样式

简介

表单是 Web 应用程序的重要组成部分，允许用户输入和提交数据。然而，默认的表单样式可能单调且在不同浏览器之间不一致。CSS 提供了强大的工具来样式化表单元素，创建更具视觉吸引力和一致性的用户体验。在本章中，我们将探索使用 CSS3 样式化表单元素的各种技术。

核心知识点

表单元素类型

1. 文本输入

  • input[type="text"]：单行文本输入
  • input[type="email"]：电子邮件地址输入
  • input[type="password"]：密码输入
  • input[type="tel"]：电话号码输入
  • input[type="url"]：URL 输入
  • textarea：多行文本输入

2. 选择控件

  • input[type="checkbox"]：复选框
  • input[type="radio"]：单选按钮
  • select：下拉选择菜单
  • option：选择菜单中的选项
  • optgroup：选择菜单中的选项组

3. 按钮

  • input[type="submit"]：提交按钮
  • input[type="reset"]：重置按钮
  • input[type="button"]：通用按钮
  • button：通用按钮

4. 其他输入类型

  • input[type="file"]：文件上传输入
  • input[type="range"]：范围滑块
  • input[type="date"]：日期选择器
  • input[type="time"]：时间选择器
  • input[type="datetime-local"]：日期和时间选择器
  • input[type="number"]：数字输入
  • input[type="search"]：搜索输入

表单样式技术

1. 基本输入样式

  • 更改字体属性
  • 调整大小和间距
  • 添加边框和背景颜色
  • 样式化焦点状态

2. 自定义选择控件

  • 样式化复选框和单选按钮
  • 创建自定义复选框和单选按钮
  • 样式化选择菜单

3. 按钮样式

  • 创建自定义按钮样式
  • 添加悬停和活动状态
  • 样式化禁用按钮

4. 表单布局

  • 使用 flexbox 进行表单布局
  • 创建响应式表单布局
  • 样式化表单标签和错误消息

5. 可访问性考虑

  • 确保适当的对比度
  • 保持键盘可访问性
  • 必要时使用 ARIA 属性

实用示例

示例 1：基本输入样式

/* 基本输入样式 */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 8px 0;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

/* 焦点状态 */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* 文本区域特定样式 */
textarea {
  resize: vertical;
  min-height: 100px;
}

示例 2：自定义复选框和单选按钮

/* 隐藏默认复选框和单选按钮 */
input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* 创建自定义复选框 */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}

/* 创建自定义复选框 */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 创建自定义单选按钮 */
.radio-container .checkmark {
  border-radius: 50%;
}

/* 鼠标悬停时，添加灰色背景色 */
.checkbox-container:hover input ~ .checkmark {
  background-color: #e0e0e0;
}

/* 当复选框被选中时，添加蓝色背景 */
.checkbox-container input:checked ~ .checkmark {
  background-color: #3498db;
}

/* 创建复选标记/指示器（未选中时隐藏） */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* 选中时显示复选标记 */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* 样式化复选标记/指示器 */
.checkbox-container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* 样式化单选按钮指示器 */
.radio-container .checkmark:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

示例 3：按钮样式

/* 基本按钮样式 */
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  background-color: #3498db;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.1s ease;
}

/* 悬停状态 */
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  background-color: #2980b9;
}

/* 活动状态 */
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
  transform: translateY(1px);
}

/* 禁用状态 */
button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="button"]:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}

/* 次要按钮 */
.button-secondary {
  background-color: #95a5a6;
}

.button-secondary:hover {
  background-color: #7f8c8d;
}

/* 危险按钮 */
.button-danger {
  background-color: #e74c3c;
}

.button-danger:hover {
  background-color: #c0392b;
}

示例 4：使用 Flexbox 的表单布局

/* 表单容器 */
.form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* 表单行 */
.form-row {
  display: flex;
  margin-bottom: 15px;
}

/* 表单组 */
.form-group {
  flex: 1;
  margin-right: 15px;
}

.form-group:last-child {
  margin-right: 0;
}

/* 标签样式 */
label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
}

/* 全宽表单组 */
.form-group-full {
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }
  
  .form-group {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .form-group:last-child {
    margin-bottom: 0;
  }
}

示例 5：样式化选择菜单

/* 基本选择菜单样式 */
select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22292.4%22 height=%22292.4%22%3E%3Cpath fill=%22%23007CB2%22 d=%22M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: 10px;
}

/* 焦点状态 */
select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* 禁用状态 */
select:disabled {
  background-color: #f1f1f1;
  cursor: not-allowed;
}

示例 6：样式化文件输入

/* 隐藏默认文件输入 */
input[type="file"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* 自定义文件输入 */
.file-input-container {
  position: relative;
  display: inline-block;
}

.file-input-label {
  background-color: #3498db;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.file-input-label:hover {
  background-color: #2980b9;
}

.file-input-text {
  margin-left: 10px;
  font-size: 16px;
  color: #666;
}

示例 7：样式化范围滑块

/* 范围滑块 */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: #f1f1f1;
  outline: none;
}

/* WebKit 的范围滑块拇指 */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3498db;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #2980b9;
}

/* Firefox 的范围滑块拇指 */
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3498db;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s ease;
}

input[type="range"]::-moz-range-thumb:hover {
  background: #2980b9;
}

动手练习

练习 1：创建联系表单

创建一个具有以下元素的联系表单：

  • 姓名输入（单行中的名字和姓氏）
  • 电子邮件输入
  • 主题输入
  • 消息文本区域
  • 提交按钮
  • 重置按钮

样式化表单，具有：

  • 干净、现代的设计
  • 适当的间距和对齐
  • 带焦点状态的自定义输入样式
  • 带悬停效果的样式化按钮
  • 在移动设备上工作的响应式布局

练习 2：创建登录表单

创建一个具有以下元素的登录表单：

  • 用户名/电子邮件输入
  • 密码输入
  • 记住我复选框
  • 登录按钮
  • 忘记密码链接

样式化表单，具有：

  • 带阴影的卡片式设计
  • 自定义输入样式
  • 样式化复选框
  • 带悬停效果的吸引人按钮
  • 清晰的视觉层次结构

练习 3：创建调查表单

创建一个具有以下元素的调查表单：

  • 个人信息的文本输入
  • 单一选择问题的单选按钮
  • 多重选择问题的复选框
  • 下拉选项的选择菜单
  • 评论的文本区域
  • 提交按钮

样式化表单，具有：

  • 自定义单选按钮和复选框
  • 清晰的部分分隔符
  • 正确对齐的表单元素
  • 所有表单元素的一致样式

总结

在本章中，我们探索了使用 CSS3 样式化表单元素的各种技术。我们涵盖了：

  1. 文本字段、文本区域和其他输入类型的基本输入样式
  2. 自定义复选框和单选按钮以创建一致的外观
  3. 带有不同状态和变体的按钮样式
  4. 使用 flexbox 创建响应式表单布局
  5. 样式化选择菜单、文件输入和范围滑块
  6. 表单样式的可访问性考虑

通过应用这些技术，您可以创建不仅视觉吸引力强而且提供更好用户体验的表单。请记住，始终在不同浏览器和设备上测试您的表单以确保一致性，并优先考虑可访问性以使您的表单对所有人可用。

复习问题

  1. 如何样式化输入元素的焦点状态？
  2. 可以使用哪些技术创建自定义复选框和单选按钮？
  3. 如何使用 flexbox 创建响应式表单布局？
  4. 哪些伪类对样式化表单元素有用？
  5. 如何样式化禁用的表单元素？
  6. 表单样式的可访问性考虑因素有哪些？
  7. 如何创建自定义文件输入按钮？
  8. 可以使用哪些属性来样式化范围滑块？

进一步阅读

« 上一篇 CSS 背景和边框属性 下一篇 » CSS 多列布局
↑