使用CSS更改已检查输入子项的跨度的CSS样式[重复]

Question

我想在检查子输入时更改跨度背景图像，有什么方法可以使用 CSS 做到这一点？

<span style='background-image:'url(bla bla)''><input id='child'/>span to be changed</span>

Answer 1

目前无法在 CSS 中选择元素的父级。
无论如何，您可以使用:has() 伪类，即is still not supported by any browser. 。
使用:has()，您的代码将是这样的：

span:has(> #child.checked) { /* styles */ }

但最好的办法是使用 JavaScript。

Answer 2

这是在没有:has的情况下实现目标的一个技巧

span {
  display: inline-block;
  width: 200px;
  height: 50px;
  border: 1px solid red;
  background-color: transparent;
  position: relative;
}
#child:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#child:checked:before {
  background: red;
  z-index: -1;
}

<span style='background-image:'url(bla bla)''><input id='child' type="checkbox"/>span to be changed</span>