使用纯CSS使背景颜色在表格单元格之间很好地“滑动”？

Question

我有一个表格，其中每行的一些单元格包含标签和单选按钮。

活动单元格的标签具有背景颜色，以将其标识为活动单元格。

如果用户更改活动单元格，我希望背景颜色从当前活动单元格“滑动”到新选择的单元格中。

我已经使用伪元素和transform: translateX(...);使用了这里的代码：

https://jsfiddle.net/moj791dh/

/* Apply sliding effect */
td {
  position: relative;
  overflow: hidden;
}

label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.5s ease;
  transform: translateX(100%);
  z-index: -1;
}

/* First column always exits right */
td:first-of-type label::before {
  transform: translateX(100%);
}

/* Last column always exits left */
td:last-of-type label::before {
  transform: translateX(-100%);
}

/* Selected label */
label:has(input[type="radio"]:checked)::before {
  transform: translateX(0);
}

/* Labels after the selected label always exit left */
td:has(input[type="radio"]:checked) ~ td label::before {
  transform: translateX(-100%);
}

<table>
  <tr>
    <td>
      <label>
        <input type="radio" name="row1" />
        Option 1
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row1" />
        Option 2
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row1" />
        Option 3
      </label>
    </td>
    <td data-column-type="other">
      <label>
        <input type="radio" name="row1" />
        Option 4
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row1" />
        Option 5
      </label>
    </td>
  </tr>
</table>

如果您依次单击单元格，您会发现它工作得非常好。它看起来漂亮、光滑，并且可以适当地改变方向。

但是，如果您单击范围更广（例如单元格#1到单元格#5），那么它就会开始看起来很难看。

有没有办法在纯 CSS 中实现这一点，最好不需要任何额外的 HTML 元素？我觉得应该特别是随着

@property

规则等的最新进展，但我不明白！

Answer 1

:has()

的解决方案。尚未准备好用于生产使用，但请在不久的将来保留它。

使用chrome测试以下内容：

table::before {
  content: "";
  position: absolute;
  z-index: -1;
  position-anchor: --label;
  inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
  background-color: red;
  transition: 0.5s ease;
}

td:has(input:checked) {
  anchor-name: --label;
}

<table>
  <tr>
    <td>
      <label>
        <input type="radio" name="row1" />
        Option 1
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row1" />
        Option 2
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row1" />
        a longer option 
      </label>
    </td>
    <td data-column-type="other">
      <label>
        <input type="radio" name="row1" />
        Option 4
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row1" />
        Op 5
      </label>
    </td>
  </tr>
</table>