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

Change parent div on input[type=checkbox]:checked with css(更改输入上的父 div[type=checkbox]:用 css 检查)
本文介绍了更改输入上的父 div[type=checkbox]:用 css 检查的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我可以弄清楚如何在选中复选框时更改父 div :(更改以下段落效果很好.

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

在 Chrome 中尝试了这种方法,但没有运气:

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/

推荐答案

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

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

查看这篇谈论它的帖子这里.

See this post that talking about it here.

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

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

Scale background image to fit ie8 window(缩放背景图像以适合 ie8 窗口)
@fontface in IE7 (IETEster) not working properly(IE7 (IETEster) 中的@fontface 无法正常工作)
Safari 5.1 breaks CSS table cell spacing(Safari 5.1 打破 CSS 表格单元格间距)
AngularJS: Initial checkbox value not in model(AngularJS:初始复选框值不在模型中)
How to delegate `hover()` function by using `on()`(如何使用 `on()` 委托 `hover()` 函数)
How to center slider in css?(如何在css中居中滑块?)