scale3d设置100%无效，如何用.inputGroup宽度替换硬编码的56值？

我来帮你搞定这个问题！咱们先搞明白为啥scale3d(100%, 56, 1)不生效——这是因为scale3d接受的是无单位的缩放倍数，不是百分比或者像素值！你写的100%会被浏览器当成无效值直接忽略，所以缩放效果根本没触发。

核心思路 #

原来的56是硬编码的缩放倍数，用来让选中时的圆形扩散效果覆盖整个.inputGroup。要实现自适应容器宽度，我们需要动态计算容器宽度和单选按钮基础尺寸的比例，用这个比例作为缩放因子。

具体解决方案（CSS变量实现，最优雅） #

我们可以用CSS自定义属性（变量）来动态计算缩放比例，步骤如下：

1. 先在.inputGroup里定义两个关键变量：

   • --radio-size：单选按钮的基础尺寸（对应原代码里label:before的宽高）
   • --scale-factor：自动计算容器宽度和单选按钮尺寸的比例

   代码示例：

   .inputGroup {
     /* 替换成你实际的单选按钮基础尺寸，比如原代码里可能是20px */
     --radio-size: 20px;
     /* 计算缩放因子：容器宽度 ÷ 单选按钮尺寸 */
     --scale-factor: calc(100% / var(--radio-size));
     /* 保留你原有的.inputGroup样式 */
     position: relative;
     margin-bottom: 25px;
     /* ...其他原有样式 */
   }
   

2. 修改选中状态的缩放样式，把硬编码的56换成我们计算好的--scale-factor：

   .inputGroup input:checked ~ label:before {
     transform: translate(-50%, -50%) scale3d(var(--scale-factor), var(--scale-factor), 1);
     opacity: 1;
     /* 保留原有其他样式 */
   }
   

为什么这样有效？ #

比如你的.inputGroup宽度是200px，单选按钮基础尺寸是20px，那么--scale-factor就是200px / 20px = 10，此时scale3d(10,10,1)会让圆形扩散10倍，刚好覆盖整个容器宽度。不管你后续怎么调整.inputGroup或者form的max-width，这个比例都会自动更新，完美适配。

备选方案（JS动态计算） #

如果你的项目不支持CSS变量，也可以用JS动态计算并设置缩放值：

// 获取所有.inputGroup元素
const inputGroups = document.querySelectorAll('.inputGroup');
inputGroups.forEach(group => {
  const radioSize = 20; // 替换成实际的单选按钮尺寸
  const groupWidth = group.offsetWidth;
  const scaleFactor = groupWidth / radioSize;
  // 找到对应的label并设置自定义属性
  const label = group.querySelector('label');
  label.style.setProperty('--scale-factor', scaleFactor);
});

然后CSS里还是用var(--scale-factor)即可，记得在页面加载和窗口 resize 时都执行这段代码哦。

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