css制作预约咨询

预约咨询表单的基本结构

使用HTML创建预约表单的基本框架，包含姓名、联系方式、预约时间等必要字段。

<form class="appointment-form">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" id="name" placeholder="请输入您的姓名">
  </div>
  <div class="form-group">
    <label for="phone">联系电话</label>
    <input type="tel" id="phone" placeholder="请输入您的手机号">
  </div>
  <div class="form-group">
    <label for="date">预约日期</label>
    <input type="date" id="date">
  </div>
  <div class="form-group">
    <label for="time">预约时间</label>
    <input type="time" id="time">
  </div>
  <button type="submit">提交预约</button>
</form>

基础样式设计

为预约表单添加基础CSS样式，提升视觉体验。

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

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

button:hover {
  background: #45a049;
}

响应式布局优化

添加媒体查询确保表单在不同设备上都能良好显示。

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

  input, button {
    padding: 8px;
  }
}

表单验证样式

为表单添加验证状态提示样式，提升用户体验。

input:invalid {
  border-color: #ff6b6b;
}

input:focus:invalid {
  box-shadow: 0 0 5px #ff6b6b;
}

.error-message {
  color: #ff6b6b;
  font-size: 0.8em;
  margin-top: 5px;
  display: none;
}

input:invalid + .error-message {
  display: block;
}

动画效果增强

添加过渡动画使交互更流畅。

input, button {
  transition: all 0.3s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

日期选择器定制

使用CSS定制日期选择器的外观。

input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

input[type="date"] {
  position: relative;
}

input[type="date"]:after {
  content: "📅";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

这些CSS方案可以组合使用或单独实现，根据实际项目需求调整样式细节。建议配合JavaScript实现完整的表单验证和提交功能。