2

次のコード内のチェックボックスをクリックしたときに、div＃mainのスタイルを設定したいと思います。css / css3のみを使用してこれを行うことはできますか？前もって感謝します！

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

4 に答える 4

2

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/

于 2012-10-29T10:52:05.093 に答える
0

html

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

CSS

.checkBox:checked
{
/* apply any css */
border:solid 1px;
}
于 2012-10-29T10:24:11.040 に答える
0

このコードを使用してください：

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

#main #content のスタイルが必要な場合は、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;
}
于 2012-10-29T10:28:40.630 に答える
0

これを使う

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

#contentチェックされたときに スタイルコードを適用しinput[type="checkbox"]ます。つまり、必要なものです

于 2012-10-29T10:41:30.020 に答える