当前位置：首页 > CSS

css表单制作简单

2026-04-02 09:21:18CSS

CSS表单制作方法

使用CSS制作表单需要结合HTML结构，通过样式属性调整外观。以下是一个基础表单的完整代码示例：

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

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

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

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

.styled-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.styled-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.styled-form input[type="text"],
.styled-form input[type="email"],
.styled-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.styled-form textarea {
  height: 120px;
  resize: vertical;
}

.styled-form button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.styled-form button:hover {
  background-color: #45a049;
}

表单样式优化技巧

调整输入框焦点状态可提升用户体验：

.styled-form input:focus,
.styled-form textarea:focus {
  border-color: #4CAF50;
  outline: none;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

响应式设计确保在不同设备上正常显示：

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

表单验证样式

为无效输入添加视觉反馈：

.styled-form input:invalid,
.styled-form textarea:invalid {
  border-color: #ff4444;
}

.styled-form input:valid,
.styled-form textarea:valid {
  border-color: #00C851;
}

高级样式选项

使用CSS变量方便主题更换：

:root {
  --primary-color: #4285f4;
  --error-color: #ff4444;
  --success-color: #00C851;
}

.styled-form button {
  background-color: var(--primary-color);
}

创建浮动标签效果：

css表单制作简单

.floating-label {
  position: relative;
}

.floating-label label {
  position: absolute;
  top: 10px;
  left: 10px;
  transition: all 0.3s;
}

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