CSS 表单元素样式教程 🖋️

表单是网页交互的重要组成部分，通过 CSS 可以实现更美观的输入控件设计。以下是常见表单元素的样式技巧：

基础样式优化

💻 输入框样式

input[type="text"], input[type="email"] {
  padding: 12px 16px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 6px;
  transition: all 0.3s ease;
}

input:focus {
  border-color: #007BFF;
  box-shadow: 0 0 8px rgba(0,123,255,0.5);
}

🕹️ 下拉菜单美化

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolygon fill='%23999' points='4,0 0,6 8,6'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding-right: 24px;
}

高级交互设计

✨ 自定义按钮样式

button {
  background: linear-gradient(to right, #6C63FF, #6366FF);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: #7E57CA;
}

📝 文本域优化

textarea {
  resize: vertical;
  min-height: 120px;
  max-width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
}

扩展阅读

想要深入了解表单布局技巧？可以参考本站的表单设计指南获取更多实践案例。

📌 提示：使用 appearance: none 可移除浏览器默认样式，但需注意兼容性问题