如何仅用CSS实现点击div时将其背景颜色改为红色

DevOps 小满

2026-6-22

仅用CSS实现点击Div后背景变红的方案

这里有两种纯CSS的实现方式，你可以根据实际需求选择：

方法1：利用`:focus`伪类实现单次点击触发变色

这种方法通过给div添加tabindex属性让它能获得焦点，点击时触发:focus状态来改变背景色。

代码示例

<div tabindex="0" class="clickable-box">点击我变红</div>

.clickable-box {
  padding: 20px;
  border: 1px solid #ddd;
  cursor: pointer;
}

/* 点击后触发焦点状态，设置红色背景 */
.clickable-box:focus {
  background-color: red;
  outline: none; /* 可选：移除浏览器默认的焦点边框 */
}

注意事项

点击页面其他区域时，div会失去焦点，背景色会恢复原状；
tabindex="0"表示该元素可通过Tab键导航，若不想让它参与Tab导航，可改用tabindex="-1"。

方法2：利用`:checked`伪类实现切换式变色

如果需要点击后保持红色（再次点击恢复），可以结合隐藏的checkbox和label来实现，通过checkbox的选中状态控制div样式。

代码示例

<!-- 隐藏的复选框 -->
<input type="checkbox" id="toggle-bg" class="hidden-check">
<!-- label与复选框关联，点击label等同于点击复选框 -->
<label for="toggle-bg" class="click-trigger">
  <div class="target-box">点击切换红色背景</div>
</label>

/* 隐藏复选框 */
.hidden-check {
  display: none;
}

.click-trigger {
  cursor: pointer;
}

.target-box {
  padding: 20px;
  border: 1px solid #ddd;
  transition: background-color 0.2s; /* 可选：添加过渡动画 */
}

/* 复选框选中时，修改对应div的背景色 */
.hidden-check:checked + .click-trigger .target-box {
  background-color: red;
}