如何实现医院软件表单中的分组选择矩形框？

根据你提供的设计图和现有代码，要实现矩形卡片式的分组单选效果，只需调整HTML结构并添加CSS样式即可，具体方案如下：

1. 调整HTML结构 #

把原来的<ul>列表改成卡片式容器，用<label>包裹每个单选选项（点击卡片任意区域都能选中单选按钮，提升交互体验）：

<form>
  <!-- 分组选择区域 -->
  <div class="form-group">
    <label>Groupe</label>
    <div class="group-options">
      <label class="group-option">
        <input type="radio" name="group" id="group1" value="1">
        <span>Groupe 1</span>
      </label>
      <label class="group-option">
        <input type="radio" name="group" id="group2" value="2">
        <span>Groupe 2</span>
      </label>
      <label class="group-option">
        <input type="radio" name="group" id="group3" value="3">
        <span>Groupe 3</span>
      </label>
    </div>
  </div>

  <!-- 其他表单元素 -->
  <div class="form-group">
    <label>Place trouvée</label>
    <input type="checkbox" name="place_trouvee">
  </div>

  <div class="form-group">
    <label>Date et heure prévue de mutation</label>
    <input type="datetime-local" name="date_heure_mutation" placeholder="jj/mm/aaaa --:--">
  </div>

  <div class="form-group">
    <label>Mobilité</label>
    <select name="mobilité">
      <option value="" selected disabled>-- sélectionner une option --</option>
    </select>
  </div>

  <button type="reset">Réinitialiser</button>
  <button type="submit">Enregistrer et fermer</button>
</form>

2. 添加CSS样式 #

通过CSS实现矩形卡片的视觉效果、选中状态高亮，同时优化整体表单样式匹配设计图：

/* 基础表单样式 */
form {
  max-width: 650px;
  margin: 2rem;
  font-family: Arial, sans-serif;
}

.form-group {
  margin-bottom: 1.8rem;
}

.form-group label:first-child {
  display: block;
  margin-bottom: 0.6rem;
  font-weight: 600;
  color: #333;
}

/* 分组选项容器 - 横向排列卡片 */
.group-options {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* 单个矩形选项卡片 */
.group-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.8rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 130px;
  background-color: #fff;
}

/* 隐藏原生单选按钮，用卡片样式替代 */
.group-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* 选中状态的卡片样式 */
.group-option:has(input[type="radio"]:checked) {
  border-color: #0066cc;
  background-color: rgba(0, 102, 204, 0.08);
}

.group-option:has(input[type="radio"]:checked) span {
  font-weight: bold;
  color: #0066cc;
}

/* 其他表单元素样式优化 */
input[type="checkbox"],
input[type="datetime-local"],
select {
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 0.4rem;
}

button {
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  margin-right: 1rem;
}

button[type="reset"] {
  background-color: #6c757d;
  color: #fff;
}

button[type="submit"] {
  background-color: #28a745;
  color: #fff;
}

关键说明 #

• 用<label>包裹整个单选选项，实现点击卡片任意区域触发选择，符合用户操作习惯
• 隐藏原生单选按钮，通过卡片边框、背景色变化反馈选中状态
• 使用:has()伪类实现选中状态的样式控制（若需兼容旧浏览器，可改用相邻兄弟选择器+额外类名的方式）
• 添加flex-wrap: wrap确保小屏幕下卡片自动换行，适配响应式布局

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