如何用CSS实现复选框选中时背景色全行覆盖的效果

在列表类页面中，经常需要实现点击复选框选中某一项时，整行的背景色发生变化，直观提示用户当前选中的内容。这种效果不需要依赖JavaScript修改样式，纯CSS就能实现，下面介绍几种常用的实现方式。

方案一：相邻兄弟选择器实现

这种方案适合复选框和行内容在同一层级，或者行容器是复选框的父元素的场景，核心是利用:checked伪类和相邻兄弟选择器+来匹配选中状态后的行元素。

首先看HTML结构，每一行是一个容器，内部包含复选框和行内容：

<div class="list-item">
  <input type="checkbox" class="item-check">
  <span class="item-content">列表项内容1</span>
</div>
<div class="list-item">
  <input type="checkbox" class="item-check">
  <span class="item-content">列表项内容2</span>
</div>

对应的CSS样式如下，当复选框选中时，通过相邻兄弟选择器找到同层级的行内容元素，修改其背景色，同时给父容器设置内边距和宽度，让背景色覆盖整行：

.list-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  width: 100%;
  box-sizing: border-box;
}
.item-check {
  margin-right: 12px;
}
.item-content {
  flex: 1;
  transition: background-color 0.2s;
}
/* 复选框选中时，修改相邻的行内容背景色 */
.item-check:checked + .item-content {
  background-color: #e6f7ff;
  border-radius: 4px;
  padding: 4px 8px;
}

这种方案的兼容性很好，支持所有现代浏览器，缺点是需要行内容和复选框是同层级相邻关系，如果结构嵌套较深可能不适用。

方案二：:has选择器实现

如果复选框是行容器的子元素，不需要和行内容相邻，就可以使用CSS的:has选择器，直接匹配包含选中复选框的行容器，修改其背景色。

HTML结构可以调整为更常见的嵌套形式：

<ul class="list">
  <li class="list-row">
    <label>
      <input type="checkbox" class="row-check">
      <span>列表项内容A</span>
    </label>
  </li>
  <li class="list-row">
    <label>
      <input type="checkbox" class="row-check">
      <span>列表项内容B</span>
    </label>
  </li>
</ul>

对应的CSS样式，通过:has选择器判断行容器内是否存在选中的复选框，存在则修改整行背景：

.list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 500px;
}
.list-row {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}
/* 行容器内包含选中的复选框时，修改整行背景 */
.list-row:has(.row-check:checked) {
  background-color: #f0f9eb;
}
label {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
}
.row-check {
  margin-right: 12px;
}

这种方案结构更灵活，不需要限制元素的相邻关系，但是:has选择器的兼容性稍弱，不支持IE浏览器，Chrome 105+、Firefox 121+、Safari 15.4+才支持。

两种方案对比

可以通过下面的表格快速选择适合自己项目的方案：

注意事项

• 如果行容器有固定高度，需要保证背景色的覆盖范围包含整个高度，可以给行容器设置box-sizing: border-box避免内边距撑大容器。
• 添加过渡效果transition可以让背景色变化更平滑，提升用户体验。
• 如果项目需要兼容IE浏览器，优先选择相邻兄弟选择器的方案，避免兼容问题。

根据实际项目的HTML结构和兼容性要求，选择合适的方案就能快速实现复选框选中时背景色全行覆盖的效果，不需要额外编写JavaScript逻辑，减少代码复杂度。

CSS复选框背景色全行覆盖nth-child修改时间：2026-06-04 18:32:34