Thu, 2019-03-07 21:51
Hello,
I am using :checked function for a checkbox that I created.
The fact is that I would like to change the background of a span who has ID and CLASS defined.
So I have declared the checkbox like this in my page (I am using Wordpress)
<input type="checkbox" id="Jour1" class="Jour1" name="NUTRITION[]" value="Jour1"><label for="Jour1" id="Jour1">DONE</label>
And in the CSS
.Jour1:checked ~ .span#Jour1 { background: #7ac143 !important;
So final html code analysed with firefox is like this :
<span class="collapseomatic arrowright colomat-close colomat-visited" id="Jour1" tabindex="0" title=" Jour 1 "> Jour 1 </span> <div id="target-Jour1" class="collapseomatic_content " style=""> <input type="checkbox" id="Jour1" class="Jour1" name="NUTRITION[]" value="Jour1"><label for="Jour1" id="Jour1">DONE</label> <br> jjjjjjjjjjjjjjjjj <br>
The fact is that if I use
.Jour1:checked ~ .span#Jour1 { background: #7ac143 !important;
I can't get the background in the right color...nothing changes when I check the box
But I have verfied that I was accessing the right part of the code with
.span#Jour1 { background: #7ac143 !important;
And here it works, the background goes to the right color.
could someone help me on this topic please ?
thank you
Sat, 2019-03-09 22:47
#1
One way to skin this cat
Try this:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 1em; } p { font-size: 1em; } #wrapper { margin: 0 auto; max-width: 65em; } h1 { font-family: serif; margin-bottom: 0; text-align: center; } /* end boilerplate */ input + span { background-color: pink; visibility: hidden; } input:checked + span { visibility: visible; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <h1> Problem with :checked (FIXED) </h1> <form action="#" method="get"> <fieldset> <legend> Pick one or more </legend> <label for="Jour1"> <input type="checkbox" id="Jour1" class="Jour1" name="NUTRITION[]" value="Jour1"> Jour1 <span>Done</span> </label> </fieldset> </form> </div> </body> </html>
g