如何在New Referral盒子下方创建带图标和下划线的表单？

HTML 结构 #

<div class="referral-box">
  <h3>New Referral</h3>
  <form class="referral-form">
    <!-- 名字字段 -->
    <div class="form-group">
      <div class="icon-label-row">
        <span class="form-icon">👤</span>
        <label for="first-name">First name</label>
      </div>
      <input type="text" id="first-name" placeholder="Enter first name" />
    </div>
    <!-- 姓氏字段 -->
    <div class="form-group">
      <div class="icon-label-row">
        <span class="form-icon">👤</span>
        <label for="last-name">Last name</label>
      </div>
      <input type="text" id="last-name" placeholder="Enter last name" />
    </div>
    <!-- 出生日期字段 -->
    <div class="form-group">
      <div class="icon-label-row">
        <span class="form-icon">📅</span>
        <label for="dob">Date of birth</label>
      </div>
      <input type="date" id="dob" />
    </div>
    <!-- 电话字段 -->
    <div class="form-group">
      <div class="icon-label-row">
        <span class="form-icon">📞</span>
        <label for="phone">Phone</label>
      </div>
      <input type="tel" id="phone" placeholder="Enter phone number" />
    </div>
    <!-- 邮箱字段 -->
    <div class="form-group">
      <div class="icon-label-row">
        <span class="form-icon">📧</span>
        <label for="email">Email</label>
      </div>
      <input type="email" id="email" placeholder="Enter email" />
    </div>
    <!-- 地址字段（占满整行） -->
    <div class="form-group full-width">
      <div class="icon-label-row">
        <span class="form-icon">🏠</span>
        <label for="address">Address</label>
      </div>
      <input type="text" id="address" placeholder="Enter full address" />
    </div>
  </form>
</div>

CSS 样式 #

/* 外层盒子样式 */
.referral-box {
  border: 1px solid #e0e0e0;
  padding: 24px;
  max-width: 900px;
  margin: 30px auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.referral-box h3 {
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #2196F3;
  font-size: 18px;
  color: #333;
}

/* 表单网格布局，实现响应式排列 */
.referral-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* 单个字段容器 */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 图标+标签行 */
.icon-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-icon {
  font-size: 18px;
  color: #666;
}

/* 带下划线的标签 */
.form-group label {
  flex: 1;
  padding-bottom: 4px;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  color: #333;
}

/* 输入框样式 */
.form-group input {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

.form-group input:focus {
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33,150,243,0.1);
}

/* 地址字段占满整行 */
.full-width {
  grid-column: 1 / -1;
}

关键实现细节 #

• 用CSS Grid实现表单字段的响应式排列，自动适配不同屏幕宽度，字段会根据容器宽度自动换行
• 每个字段的图标和标签通过Flex布局实现并排，确保对齐一致
• 标签的下划线通过border-bottom属性直接实现，无需额外元素
• 地址字段通过grid-column: 1 / -1设置为全屏宽度，符合常规表单布局逻辑
• 输入框添加了焦点样式，提升交互体验

内容的提问来源于stack exchange，提问作者Buse Nur