在输入 [type=checkbox] 上更改父 div：用 css 检查

Change parent div on input[type=checkbox]:checked with css

提问by lajlev

I can figure out how to make the parent div change when checkbox is checked :( Changing the following paragraph works fine.

我可以弄清楚如何在选中复选框时更改父 div :( 更改以下段落可以正常工作。

Tried this approach without luck in Chrome:

在 Chrome 中尝试了这种方法而没有运气：

HTML

HTML

?<div>
    <input type="checkbox??????????????????????????????" checked>
    <p>Test</p>
</div>???????????????????????????????????????????????

CSS

CSS

div {
    background: pink;
    width: 50px;
    height:50px;
}
div + input[type=checkbox]:checked {
  background: green;
}

input[type=checkbox]:checked + p {
    background: blue;
}

? http://jsfiddle.net/lajlev/3xUac/

? http://jsfiddle.net/lajlev/3xUac/

采纳答案by Val

No way to select a parent with CSS only (until CSS4), so you must use JS..

无法仅使用 CSS 选择父级（直到 CSS4），因此您必须使用 JS ..

See this post that talking about it here.

看到这篇文章在这里谈论它。

回答by Ali Tenni

try this :

尝试这个 ：

html

html

<input type="checkbox" checked>
<div>
   <p>Test</p>
</div>

css

css

div {
    background: pink;
    width: 50px;
    height:50px;
}
input[type=checkbox]:checked + div {
  background: green;
}

input[type=checkbox]:checked + div p {
    background: blue;
}

demo

演示