HTML表单实现堆叠块状社交平台单选选项功能求助

原生<select>组件的UI样式受浏览器默认规则限制，无法直接自定义为上下堆叠的块状点击选项，最优实现方案是用单选输入框搭配label标签改造，具体修改如下：

一、HTML代码修改 #

把原来<li>标签内的select部分替换为多个radio+label的组合：

<body>
  <section class="Main-Wrapper">
    <header>
      <h1>Social Profiles</h1>
      <p>Your presence on the social media</p>
    </header>
    <form action="">
      <fieldset>
        <ol>
          <li>
            <!-- 替换原来的select部分 -->
            <input type="radio" name="social" id="twitter" value="twitter" hidden>
            <label for="twitter">Twitter</label>

            <input type="radio" name="social" id="facebook" value="facebook" hidden>
            <label for="facebook">Facebook</label>

            <input type="radio" name="social" id="google" value="google_plus" hidden>
            <label for="google">Google Plus</label>
          </li>
        </ol>
        <section>
          <a href="#" class="previous">Previous</a>
          <a href="" class="next">Next</a>
        </section>
      </fieldset>
    </form>
  </section>
</body>

二、新增CSS样式 #

在你原有CSS代码的基础上添加以下样式，实现块状选项效果：

/* 选项label基础样式 */
label {
  display: block;
  padding: 8px 12px;
  margin: 6px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 选项hover效果 */
label:hover {
  background-color: #f0f0f0;
  border-color: #ccc;
}

/* 选项选中后的高亮效果 */
input:checked + label {
  background-color: #e3f2fd;
  border-color: #2196f3;
  color: #1976d2;
}

三、跳转逻辑实现 #

如果需要选中后直接跳转，可添加以下JS代码：

const socialRadios = document.querySelectorAll('input[name="social"]');
socialRadios.forEach(radio => {
  radio.addEventListener('change', () => {
    if(radio.checked) {
      // 这里替换为你要跳转的页面地址，可根据选中的radio.value动态生成目标地址
      window.location.href = '你的下一页地址';
    }
  })
})

如果是点击Next按钮跳转，直接给next按钮绑定click事件，读取选中的社交平台值后再跳转即可。

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