本文介绍了在输入 [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 检查的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
07-23 16:57