当前位置：首页 > CSS

表单制作css

2026-01-28 05:13:16CSS

表单基础样式设计

表单元素通常包括输入框、下拉菜单、单选按钮、复选框等。基础样式设计应注重统一性和可读性。

.form-group {
  margin-bottom: 15px;
}
.form-control {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.form-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}

交互状态样式

为提升用户体验，需要为表单元素设计不同的交互状态样式。

.form-control:focus {
  border-color: #4285f4;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
  outline: none;
}
.form-control:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}
.error-message {
  color: #dc3545;
  font-size: 12px;
  margin-top: 5px;
}

响应式表单布局

针对不同屏幕尺寸调整表单布局，确保在各种设备上都能良好显示。

@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
  }
}

美化表单控件

使用CSS3特性增强表单控件的外观，使其更具现代感。

input[type="checkbox"],
input[type="radio"] {
  position: relative;
  margin-right: 10px;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 3px;
  outline: none;
}
input[type="checkbox"]:checked {
  background-color: #4285f4;
  border-color: #4285f4;
}
input[type="radio"] {
  border-radius: 50%;
}
input[type="radio"]:checked {
  background-color: #4285f4;
  border-color: #4285f4;
}

表单验证样式

为表单验证结果提供视觉反馈，帮助用户识别输入问题。

.form-control.valid {
  border-color: #28a745;
}
.form-control.invalid {
  border-color: #dc3545;
}
.validation-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.valid + .validation-icon {
  color: #28a745;
}
.invalid + .validation-icon {
  color: #dc3545;
}

高级表单特效

添加过渡和动画效果，使表单交互更加流畅自然。

.form-control {
  transition: border-color 0.3s, box-shadow 0.3s;
}
.form-submit {
  background-color: #4285f4;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.form-submit:hover {
  background-color: #3367d6;
}
.form-submit:active {
  transform: translateY(1px);
}

表单制作css