当前位置：首页 > CSS

表单css案例制作

2026-04-02 12:50:41CSS

表单CSS案例制作

基础表单样式

设置表单容器和输入框的基础样式，包括边框、内边距和圆角：

.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.input-field {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

标签和按钮样式

为表单标签和按钮添加样式，提升可读性和交互性：

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

.submit-btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
}

.submit-btn:hover {
  background-color: #45a049;
}

响应式设计

使用媒体查询确保表单在不同设备上显示良好：

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

  .input-field {
    padding: 8px;
  }
}

焦点状态和验证样式

为输入框添加焦点状态和验证提示样式：

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

.error-message {
  color: #f44336;
  font-size: 14px;
  margin-top: -10px;
  margin-bottom: 15px;
}

.input-error {
  border-color: #f44336;
}

高级样式技巧

为表单添加过渡效果和自定义选择框：

.input-field {
  transition: border-color 0.3s, box-shadow 0.3s;
}

.custom-select {
  position: relative;
  width: 100%;
}

.custom-select select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

暗黑模式支持

为表单添加暗黑模式支持：

表单css案例制作

@media (prefers-color-scheme: dark) {
  .form-container {
    background-color: #333;
    color: #fff;
  }

  .input-field {
    background-color: #444;
    color: #fff;
    border-color: #555;
  }

  .form-label {
    color: #ddd;
  }
}