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

问题描述

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

在 Chrome 中尝试了这种方法但没有成功:

HTML

 
<input type="checkbox<p>测试</p></div>

CSS

div {背景:粉红色；宽度:50px；高度:50px；}div + 输入[类型=复选框]:选中{背景:绿色；}输入[类型=复选框]:选中+ p {背景:蓝色；}

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

解决方案

没有办法只用 CSS 选择父级(直到 CSS4)，所以必须用 JS..

在这里查看这篇讨论它的帖子.

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

Tried this approach without luck in Chrome:

HTML

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

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/

解决方案

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

See this post that talking about it here.

这篇关于在输入 [type=checkbox] 上更改父 div:用 css 检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！