如何仅用CSS（无需JS）根据单元格内输入框值设置表格单元格背景色

我已经通过JavaScript实现了<td>单元格背景色随内嵌<input type="number">输入框的值动态变化的效果（代码示例如下）。现在我想知道：是否可以完全不依赖JavaScript，仅使用CSS达成同样的效果？ 我拥有CSS的完全控制权，无法使用任何JS，且可以使用支持最新CSS特性的前沿浏览器。

原JavaScript实现代码 #

function updateBgColor(td) {
    const input = td.getElementsByTagName('input')[0]
    td.style.backgroundColor = `rgb(96,${128+input.value*127},96)`
}

for (const input of document.getElementsByTagName('input')) {
    input.addEventListener('input', event => updateBgColor(event.target.parentElement))
}

[...document.getElementsByTagName('td')].forEach(updateBgColor)

原CSS样式 #

input[type=number] {
  max-width: 6em;
  background-color: transparent;
}

原HTML结构 #

<table>
  <tr>
    <td><input type=number value="0.9097174053213968"></td>
    <td><input type=number value="0.8408987079229189"></td>
    <td><input type=number value="0.7024472413860736"></td>
    <td><input type=number value="0.5185149759852405"></td>
  </tr>
  <tr>
    <td><input type=number value="0.51746948952139"></td>
    <td><input type=number value="0.23249116318958274"></td>
    <td><input type=number value="0.24954372649914003"></td>
    <td><input type=number value="0.7852880719259674"></td>
  </tr>
  <tr>
    <td><input type=number value="0.006423826937380195"></td>
    <td><input type=number value="0.18798660892180274"></td>
    <td><input type=number value="0.33787422244115817"></td>
    <td><input type=number value="0.2012761039221167"></td>
  </tr>
  <tr>
    <td><input type=number value="0.6635851618352506"></td>
    <td><input type=number value="0.4795899245078339"></td>
    <td><input type=number value="0.6457512930088372"></td>
    <td><input type=number value="0.6226533953736908"></td>
  </tr>
</table>

解决方案：CSS-only实现 #

可以通过CSS的:has()选择器、attr()函数结合CSS变量来实现，完全不需要JavaScript。核心思路是：

1. 用:has()选中包含<input type=number>的<td>元素
2. 用attr(value, number, 0)读取输入框的value属性值，转为数值类型存入CSS变量
3. 通过calc()计算绿色通道的颜色值，和原JS逻辑保持一致
4. 利用:focus-within触发输入时的实时重绘，确保颜色随输入值动态更新

最终CSS代码 #

input[type=number] {
  max-width: 6em;
  background-color: transparent;
}

/* 核心逻辑：设置单元格背景色 */
td:has(input[type=number]) {
  /* 获取输入框的value值，默认0 */
  --input-val: attr(value, number, 0);
  /* 计算绿色通道：128 + value*127，对应原JS的颜色逻辑 */
  --green: calc(128 + var(--input-val) * 127);
  background-color: rgb(96, var(--green), 96);
}

/* 输入时强制更新：解决部分浏览器实时更新的问题 */
td:has(input[type=number]:focus) {
  --input-val: attr(value, number, 0);
}

关键说明 #

• :has()选择器：用来定位包含指定子元素的父元素，是实现父元素样式依赖子元素属性的核心
• attr()函数：使用attr(value, number, 0)语法将输入框的value属性转为数值类型，属性不存在时默认值为0
• 浏览器兼容性：需要Chrome 105+、Safari 15.4+或其他支持:has()和数值类型attr()的前沿浏览器；部分浏览器可能需要开启实验性Web平台特性
• 实时更新：添加:focus状态的重写逻辑，确保用户输入时颜色能实时变化，避免部分浏览器的缓存问题

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