點擊複選框時的css樣式

Question

我想在下面的代碼中設置div＃main的樣式，當我點擊其中的複選框時。我可以只使用css/css3來做到這一點嗎？先謝謝你！

<div id="main"> 
<div id="content"> 
<input type="checkbox"/> 
</div> 
</div> 

Answer 1

你可以用HTML &玩什麼CSS。像這樣寫：

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

入住這http://jsfiddle.net/j5nTx/

Answer 2

HTML

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

CSS

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

Answer 3

使用此代碼：

#main #content input[type="checkbox"]:checked { 
    /*your styles*/ 
} 

如果你想要的風格#main＃內容，你應該使用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; 
} 

Answer 4

使用這一個

input[type="checkbox"]:checked #content { 
    /*your color changing code*/ 
} 

它應用樣式代碼#content時input[type="checkbox"]被cheked也就是說你想