当前位置：首页 > CSS

css表单制作模版

2026-03-12 13:56:04CSS

基础表单结构

使用HTML创建表单基础框架，搭配CSS进行样式设计。表单通常包含输入框、标签、按钮等元素。

<form class="form-template">
  <label for="name">姓名</label>
  <input type="text" id="name" placeholder="输入姓名">

  <label for="email">邮箱</label>
  <input type="email" id="email" placeholder="输入邮箱">

  <label for="message">留言</label>
  <textarea id="message" placeholder="输入留言"></textarea>

  <button type="submit">提交</button>
</form>

响应式布局设计

通过CSS Flexbox或Grid实现表单的响应式布局，适应不同屏幕尺寸。

.form-template {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  gap: 15px;
}

@media (max-width: 600px) {
  .form-template {
    padding: 10px;
  }
}

输入框样式定制

自定义输入框的边框、焦点状态和过渡效果，提升用户体验。

.form-template input,
.form-template textarea {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.3s;
}

.form-template input:focus,
.form-template textarea:focus {
  border-color: #4285f4;
  outline: none;
}

按钮交互效果

为提交按钮添加悬停和点击效果，增强视觉反馈。

.form-template button {
  background-color: #4285f4;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form-template button:hover {
  background-color: #3367d6;
}

验证状态提示

通过CSS伪类为表单验证状态提供视觉提示。

.form-template input:invalid {
  border-color: #ff4444;
}

.form-template input:valid {
  border-color: #00C851;
}

浮动标签设计

实现标签浮动效果，节省空间的同时保持表单可读性。

.form-template label {
  position: absolute;
  left: 10px;
  top: 10px;
  transition: all 0.3s;
  pointer-events: none;
}

.form-template input:focus + label,
.form-template input:not(:placeholder-shown) + label {
  top: -10px;
  left: 5px;
  font-size: 12px;
  background: white;
  padding: 0 5px;
}

暗黑模式支持

通过CSS变量实现表单的暗黑模式切换。

css表单制作模版

:root {
  --bg-color: #fff;
  --text-color: #333;
  --border-color: #ddd;
}

[data-theme="dark"] {
  --bg-color: #222;
  --text-color: #f0f0f0;
  --border-color: #444;
}

.form-template {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.form-template input {
  border-color: var(--border-color);
}