I want to style the div#main in the following code when I click on the checkbox inside it. Can I do this using only css/css3? Thank you in advance!
<div id="main">
<div id="content">
<input type="checkbox"/>
</div>
</div>
4 Answers
You can play with HTML & css. Write Like this:
<input type="checkbox" id="change"/>
<div id="main">
<div id="content">
<label for="change"></label>
<h2>hello</h2>
</div>
</div>
CSS
#main{
width:100px;
height:100px;
background:red;
text-align:center;
}
input{
display:none;
}
input:checked ~ #main{
border:2px solid green;
font-size:24px;
background:yellow;
}
input:checked ~ #main label{
background:url(http://farm6.static.flickr.com/5182/5840005274_b3bcc52bb1_o.png);
}
label{
background:url(http://farm3.static.flickr.com/2793/5839457953_1690178a65_o.png);
display:block;
width:18px;
height:18px;
}
Check this http://jsfiddle.net/j5nTx/
2 Comments
insertusernamehere
I think that's the only way of doing it using CSS only.
JW-Munich
thanks. it took me a few minutes to understand why it works. it might be nice to explain that the <label for="..."> can be placed separately to the input checkbox and is also clickable. This saves the need for any JS click handlers. see stackoverflow.com/a/6293626
html
<input type="checkbox" class="checkBox"/>
CSS
.checkBox:checked
{
/* apply any css */
border:solid 1px;
}
1 Comment
David Thomas
This doesn't style the
div .use this one
input[type="checkbox"]:checked #content {
/*your color changing code*/
}
it applies the style code to #content when input[type="checkbox"] is cheked i.e what you want
1 Comment
David Thomas
Space implies the div is a descendant of the checkbox. It isn't. It can't be.
use this code :
#main #content input[type="checkbox"]:checked {
/*your styles*/
}
if you want style to #main #content you should use jquery :
$(function () {
$("#chk").change(function () {
if ($(this).is(":checked"))
$("#content").addClass("newClass");
else {
$("#content").removeClass("newClass");
}
});
});
CSS :
.newClass{
width: 100px;
height: 100px;
background-color: red;
}
2 Comments
Ljubo Valevski
this styles the checkbox, not the parent div
insertusernamehere
I would say using
#main #content is a bit redundant, as the id is always unique.
divonly if it's a later sibling of the checkbox.