CODEWITHSUNDEEP
htmlcsspseudo-element
titlu
titlu

Reputation: 129

:checked pseudo class selector is not working on CSS

I am trying to show/hide a image using :checked pseudo class using only css. The console shows no error but I am not able to see the image on clicking the checkbox.

HTML Code :

<!DOCTYPE>
<html>
    <head>
    <link rel="stylesheet" href="java.css">
    </head>
    <body>
        <div id="div1"></div>
        <input type="checkbox" id="chk1">
        <img src="IMAG0182.jpg" style="display :none"></img>

    </body>
</html>

CSS Code :

input[type=checkbox]:checked + img {
display : block;
}

Upvotes: 1

Views: 2653

Answers (1)

adeneo
adeneo

Reputation: 318242

Inline styles will always override a stylesheet,it's one of the rules of CSS Specificity.

Set the initial state in the stylesheet

input[type=checkbox] + img {
  display: none;
}


input[type=checkbox]:checked + img {
  display: block;
}
<input type="checkbox" id="chk1">
<img src="IMAG0182.jpg" />

Upvotes: 4

Related Questions