勾选checkbox时todo-section背景色未覆盖整行问题求助

勾选复选框后，文本删除线可正常显示，但背景色仅覆盖label文本区域，无法延伸至复选框所在位置，导致整行背景不完整。

问题代码回顾 #

原CSS代码：

.todo-section [type=checkbox]:checked+label {
  text-decoration: line-through;
  background-color: #D7B99E;
}

.todo-section {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #000000;
}

原HTML代码：

<form>
  <div class="todo-section">
    <input type="checkbox" id="todo1" name="todo1" value="ID">
    <label for="todo1" class="checked"> Please bring picture ID and insurance card on the day of your procedure.</label>
  </div>
</form>

解决方案 #

方法1：利用:has选择器（现代浏览器适用）

直接给包含选中状态复选框的父容器添加背景色，代码简洁直观：

/* 复选框选中时，给整个todo-section添加背景 */
.todo-section:has([type=checkbox]:checked) {
  background-color: #D7B99E;
}

/* 仅给label添加删除线样式 */
.todo-section [type=checkbox]:checked+label {
  text-decoration: line-through;
}

.todo-section {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #000000;
}

注意：:has选择器需要浏览器版本支持（Chrome 101+、Firefox 121+、Safari 15.4+）

方法2：布局调整方案（兼容旧浏览器）

通过绝对定位复选框，让label占据整行空间，背景色自然覆盖整行区域：

.todo-section {
  display: flex;
  position: relative; /* 作为复选框的定位容器 */
  border-bottom: 1px solid #000000;
}

/* 绝对定位复选框，确保在label上方可正常点击 */
.todo-section [type=checkbox] {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* label占满整行，给复选框留出左侧空间 */
.todo-section label {
  flex: 1;
  padding-left: 35px;
  margin: 0;
}

.todo-section [type=checkbox]:checked+label {
  text-decoration: line-through;
  background-color: #D7B99E;
}

两种方法均可实现勾选后整行背景色覆盖的效果，可根据项目的浏览器兼容性需求选择使用。

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