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>
-
1Does this answer your question? Change parent div on input[type=checkbox]:checked with cssJHeth– JHeth2020-03-18 10:48:29 +00:00Commented Mar 18, 2020 at 10:48
-
no, it's not give me answer it's suggest to use (:has) that is not supported by any browserRawan Mansour– Rawan Mansour2020-03-18 10:50:56 +00:00Commented Mar 18, 2020 at 10:50
-
1That'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– JHeth2020-03-18 10:53:10 +00:00Commented Mar 18, 2020 at 10:53
Add a comment
|
2 Answers
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.
3 Comments
Rawan Mansour
ok but it's still not supported by all the browsers.
Urel
¯_(ツ)_/¯ You must use JavaScript
Urel
Desolate, but there are no other ways in css
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>2 Comments
Temani Afif
stackoverflow.com/q/2587669/8620333 .. your code will not work in Firefox
Banzay
it can be overcome