选中复选框时更改标签背景颜色答案

【问题标题】：Change Label Background Color When Checkbox Checked选中复选框时更改标签背景颜色
【发布时间】：2021-01-12 22:22:05
【问题描述】：

我需要有关此代码的帮助，当我选中复选框时，如何使整个标签的背景颜色发生变化？我想要整个 td 或在选中复选框时更改它的背景

我认为我可以只使用 css 来做到这一点

https://codepen.io/Haitham1000/pen/ZEWPMeY

<table class="choices">
  <tr>
    <td>
      <div class="checkbox">
        <label><input type="checkbox" value="">All categories</label>
      </div>
    </td>

    <td>
      <div class="checkbox">
        <label><input type="checkbox" value="">1</label>
      </div>
    </td>

    <td>
      <div class="checkbox disabled">
        <label><input type="checkbox" value="" disabled>2</label>
      </div>
    </td>

    <td>
      <div class="checkbox">
        <label><input type="checkbox" value="">3</label>
      </div>
    </td>

    <td>
      <div class="checkbox">
        <label><input type="checkbox" value="">4</label>
      </div>
    </td>
  </tr>
</table>

【问题讨论】：

@PedroCardoso 的方法应该在这里使用才能达到效果

标签： html css checkbox background label

【解决方案1】：

这需要一个父选择器，而 CSS 不存在该选择器。但是，您会在复选框之后执行兄弟姐妹。这意味着您可以有一个背景元素，它可以拉伸整个宽度和高度，并且在所有其他元素的后面改变颜色。看我的sn-p

input:checked ~ .background {
  background-color: blue;
}

.background {
  position: fixed;
  z-index: -1;
  
  top: 0; left: 0;

  width: 100vw;
  height: 100vh;
  
  background-color: grey;
}

<input type="checkbox">
<div class="background">

【讨论】：

【解决方案2】：

很简单！

把你的标签放在输入之后：

<input type="checkbox" value=""><label>All categories</label>

将此 css 添加到您的代码中：

input:checked ~ label {
  background-color: blue;
}

【讨论】：