0

I want to change span background image when it's child input is checked, any way to do that using CSS?

<span style='background-image:'url(bla bla)''><input id='child'/>span to be changed</span>
Rawan Mansour
  • 111
  • 2
  • 16
  • 1
    Does this answer your question? [Change parent div on input\[type=checkbox\]:checked with css](https://stackoverflow.com/questions/10846127/change-parent-div-on-inputtype-checkboxchecked-with-css) – JHeth Mar 18 '20 at 10:48
  • no, it's not give me answer it's suggest to use (:has) that is not supported by any browser – Rawan Mansour Mar 18 '20 at 10:50
  • 1
    That's an autogenerated comment by StackOverflow when a question is marked as a duplicate. I wasn't suggesting there's an answer, I flagged this as a duplicate of a question that has been asked many times. The answer is currently, no. You will need to use Javascript to make that happen in a clean way. – JHeth Mar 18 '20 at 10:53

2 Answers2

0

There is currently no way to select the parent of an element in CSS.
Anyway you can use :has() pseudo-class, that is still not supported by any browser. .
With :has() your code will be something like this:

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



But the best thing is to do it with JavaScript.

Urel
  • 181
  • 10
-1

Here is one trick to achieve the goal without :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>
Banzay
  • 9,310
  • 2
  • 27
  • 46