基于单选按钮的动态CSS动画：无需固定宽度实现指示器覆盖标签

当然可以做到！不需要给.switch设置固定宽度，我们可以结合CSS自适应属性和少量JavaScript（或现代CSS伪类）来实现动态宽度下的指示器跟随效果，完全摆脱固定宽度的限制。

方案一：现代CSS+轻量JS（依赖:has()伪类） #

这种方案利用CSS原生能力定位，仅用JS获取标签宽度，兼容性覆盖绝大多数现代浏览器：

.wrap {
  display: flex;
}

.switch {
  position: relative;
  width: fit-content; /* 让容器宽度完全自适应内容 */
  padding: 0 1rem;
  display: inline-flex;
  gap: 1rem; /* 控制标签间的间距 */
}

.switch__indicator {
  position: absolute;
  top: 0;
  z-index: -1;
  height: 3rem;
  border: 2px solid #eee;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.switch__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.switch__input {
  display: none; /* 隐藏原生单选框 */
}

/* 通过:has()伪类匹配选中状态，动态调整指示器 */
.switch:has(.switch__input:nth-child(1):checked) .switch__indicator {
  left: calc(1rem + var(--label-1-offset));
  width: var(--label-1-width);
}

.switch:has(.switch__input:nth-child(2):checked) .switch__indicator {
  left: calc(1rem + var(--label-1-offset) + var(--label-1-width) + 1rem);
  width: var(--label-2-width);
}

const switchEl = document.querySelector('.switch');
const labels = switchEl.querySelectorAll('.switch__label');

// 初始化标签宽度与偏移量的CSS变量
labels.forEach((label, index) => {
  const rect = label.getBoundingClientRect();
  const containerRect = switchEl.getBoundingClientRect();
  switchEl.style.setProperty(`--label-${index+1}-width`, `${rect.width}px`);
  switchEl.style.setProperty(`--label-${index+1}-offset`, `${rect.left - containerRect.left}px`);
});

// 窗口大小变化时重新计算
window.addEventListener('resize', () => {
  labels.forEach((label, index) => {
    const rect = label.getBoundingClientRect();
    const containerRect = switchEl.getBoundingClientRect();
    switchEl.style.setProperty(`--label-${index+1}-width`, `${rect.width}px`);
    switchEl.style.setProperty(`--label-${index+1}-offset`, `${rect.left - containerRect.left}px`);
  });
});

方案二：全JS驱动（兼容性拉满） #

如果需要兼容不支持:has()的旧浏览器，直接用JS监听交互来动态控制指示器：

.wrap {
  display: flex;
}

.switch {
  position: relative;
  width: fit-content;
  padding: 0 1rem;
  display: inline-flex;
  gap: 1rem;
}

.switch__indicator {
  position: absolute;
  top: 0;
  z-index: -1;
  height: 3rem;
  border: 2px solid #eee;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.switch__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.switch__input {
  display: none;
}

const switchContainer = document.querySelector('.switch');
const indicator = switchContainer.querySelector('.switch__indicator');
const labels = switchContainer.querySelectorAll('.switch__label');
const inputs = switchContainer.querySelectorAll('.switch__input');

// 核心函数：根据目标标签调整指示器位置和宽度
function updateIndicator(targetLabel) {
  const labelRect = targetLabel.getBoundingClientRect();
  const containerRect = switchContainer.getBoundingClientRect();
  // 计算相对容器的左侧偏移
  const relativeLeft = labelRect.left - containerRect.left + parseInt(getComputedStyle(switchContainer).paddingLeft);
  indicator.style.left = `${relativeLeft}px`;
  indicator.style.width = `${labelRect.width}px`;
}

// 初始化默认选中状态
updateIndicator(labels[0]);
inputs[0].checked = true;

// 监听标签点击事件
labels.forEach((label, index) => {
  label.addEventListener('click', () => {
    inputs[index].checked = true;
    updateIndicator(label);
  });
});

// 窗口 resize 时自动更新
window.addEventListener('resize', () => {
  const activeLabel = switchContainer.querySelector('.switch__input:checked')?.nextElementSibling || labels[0];
  updateIndicator(activeLabel);
});

关键思路总结 #

• 用width: fit-content让.switch容器完全自适应内部标签的总宽度，彻底摆脱固定宽度限制。
• 不再依赖translate3d的固定位移计算，而是通过获取标签的实际尺寸和相对位置，动态设置指示器的left和width属性。
• 加入窗口resize监听，确保在窗口大小变化或标签内容更新时，指示器能始终准确覆盖选中标签。

这样不管标签内容长短如何变化，容器宽度都会自动调整，指示器也能完美跟随当前选中的标签啦！

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