如何仅用CSS和HTML实现单选按钮选中切换动画？兼解决间隙问题

一、纯CSS实现背景线性移动效果 #

完全可以用纯CSS实现，核心思路是借助伪元素作为背景滑块，结合单选框的checked状态控制滑块位置，配合CSS过渡动画达成平滑移动效果。无需JavaScript也能实现固定宽度选项的场景，若选项文本长度不固定，再用JS辅助动态计算宽度即可。

二、修复第一个元素的间隙问题 #

间隙源于form的padding-left:5px与选中span的padding叠加导致视觉错位，只需调整form内边距和label的布局规则就能解决。

修改后的完整代码 #

HTML #

<div class="options">
  <form>
    <label>
      <input type="radio" id="option1" name="options" onclick="handleClick(event)" checked>
      <span>Option 1</span>
    </label>
    <label>
      <input type="radio" id="option2" name="options" onclick="handleClick(event)">
      <span>Option 2</span>
    </label>
    <label>
      <input type="radio" id="option3" name="options" onclick="handleClick(event)">
      <span>Option 3</span>
    </label>
  </form>
</div>

CSS #

*, *::before, *::after {
  box-sizing: border-box;
}

input[type="radio"] {
  display: none;
}

form {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow: hidden;
  background-color: #242424;
  color: white;
  border-radius: 10px;
  padding: 0; /* 移除默认内边距，消除间隙 */
}

/* 可移动的背景滑块伪元素 */
form::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(var(--active-width) - 4px);
  background-color: #747bff;
  border-radius: 8px;
  transition: left 0.3s ease, width 0.3s ease;
  z-index: 0;
}

label {
  display: flex;
  align-items: center;
  cursor: pointer;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden; 
  text-overflow: ellipsis;
  border-radius: 10px;
  margin: 0;
  padding: 10px; /* 将点击区域padding移到label上，保证交互范围一致 */
  position: relative;
  z-index: 1; /* 让文字层级高于背景滑块 */
}

form > label:not(:first-child) {
  margin-left: 5px;
}

label span {
  margin-left: 0;
}

/* 根据选中的单选框，控制滑块位置与宽度 */
#option1:checked ~ form::before {
  left: 2px;
  width: calc(var(--opt1-width) - 4px);
}

#option2:checked ~ form::before {
  left: calc(var(--opt1-width) + 5px + 2px);
  width: calc(var(--opt2-width) - 4px);
}

#option3:checked ~ form::before {
  left: calc(var(--opt1-width) + var(--opt2-width) + 10px + 2px);
  width: calc(var(--opt3-width) - 4px);
}

JavaScript（动态计算宽度用） #

如果选项文本长度不固定，需要用JS实时计算每个label的宽度，赋值给CSS变量：

let options = "OPTION1";

function handleClick() {
  const labels = document.querySelectorAll('form label');
  // 给每个label设置宽度变量
  labels.forEach((label, idx) => {
    document.documentElement.style.setProperty(`--opt${idx+1}-width`, `${label.offsetWidth}px`);
  });
  // 更新当前选中项的宽度变量
  const checkedRadio = document.querySelector('input[type="radio"]:checked');
  if (checkedRadio) {
    options = checkedRadio.id.toUpperCase();
    document.documentElement.style.setProperty('--active-width', `${checkedRadio.parentElement.offsetWidth}px`);
  }
  console.log(`debug > option selected: ${ options }`);
}

// 页面加载时初始化宽度计算
window.addEventListener('load', handleClick);

关键细节说明 #

1. 背景滑块：用form::before作为独立的背景元素，通过left和width的过渡动画实现平滑位移
2. CSS变量：动态获取label宽度，确保滑块能精准匹配每个选项的位置和尺寸
3. 间隙修复：移除form的左右内边距，将span的padding转移到label上，保证布局对齐且点击区域完整
4. 层级控制：给label设置z-index:1，确保文字始终显示在背景滑块上方

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