css styling when click on checkbox

Question

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>

here is the same http://stackoverflow.com/questions/5275857/highlight-label-if-checkbox-is-checked-html-css — Scott.N, Oct 29 '12 at 10:27
No. you can style the `div` only if it's a later sibling of the checkbox. — David Thomas, Oct 29 '12 at 10:43

score 4 · Accepted Answer · answered Oct 29 '12 at 10:52

4

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/

answered Oct 29 '12 at 10:52

sandeep

91,313
23
137
155

I think that's the only way of doing it using CSS only. – insertusernamehere Oct 29 '12 at 10:53
thanks. it took me a few minutes to understand why it works. it might be nice to explain that the can be placed separately to the input checkbox and is also clickable. This saves the need for any JS click handlers. see https://stackoverflow.com/a/6293626 – JW-Munich May 04 '23 at 10:12

score 0 · Answer 2 · answered Oct 29 '12 at 10:24

0

html

<input type="checkbox" class="checkBox"/>

CSS

.checkBox:checked
{
/* apply any css */
border:solid 1px;
}

answered Oct 29 '12 at 10:24

Man Programmer

5,300
2
21
21

This doesn't style the `div `. – David Thomas Oct 29 '12 at 10:44

Sirwan Afifi · Answer 3 · 2012-10-29T11:11:11.170

0

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;
}

edited Oct 29 '12 at 11:11

answered Oct 29 '12 at 10:28

Sirwan Afifi

10,654
14
63
110

this styles the checkbox, not the parent div – Ljubo Valevski Oct 29 '12 at 10:45
I would say using `#main #content` is a bit redundant, as the id is always unique. – insertusernamehere Oct 29 '12 at 10:54

score 0 · Answer 4 · answered Oct 29 '12 at 10:41

0

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

answered Oct 29 '12 at 10:41

Sahil Popli

105
9

Space implies the div is a descendant of the checkbox. It isn't. It can't be. – David Thomas Oct 29 '12 at 10:44

css styling when click on checkbox

4 Answers4