根据输入检查更改CSS

提前道歉，因为我知道这是一个愚蠢的问题。我使用下面的CSS代码改变时，它的相关的复选框标签的背景色被选中：根据输入检查更改CSS

#project input[id="button1"]:checked + label {background-color:red;}

我也想改变整个网页的背景颜色时id="button1"检查。那可能吗？我尝试添加到线和新线没有成功：

input[id="button1"]:checked {background-color:blue;}

应该不会影响DIV外的背景是什么？我无法弄清楚。成品应该有标签背景颜色和页面背景颜色连接到复选框的状态。

来源

2015-04-06 user3283304

通过纯CSS事件，您只能更改切换事件的元素子元素的元素的样式。你的身体永远不是checkboxinput的子女（除非你很高）。所以唯一的选择是一些JavaScript/jQuery。

Basic simple example

var button = document.getElementById('button1'); 

button.addEventListener('click', function() { 
    document.querySelector('body').classList.toggle('blue'); 
});

来源

2015-04-06 02:35:27 knitevision

非常好！你认为这可以在没有jQuery的情况下完成吗？也许只是内联的JavaScript？或没有？（也谢谢！） – user3283304 2015-04-06 04:44:54

@ user3283304 http://codepen.io/knitevision1/pen/OPYRLB - plain JS – knitevision 2015-04-06 04:59:43

input[id="button1"]:checked {background-color:blue;}

“应该不会影响DIV外的背景是什么？” - 不，它只会影响该输入元素。

一般来说，你不能这样做，仅CSS意味着，你将需要假设：包含选择：

body:contains(input[id="button1"]:checked) {background-color:blue;}

不幸的：已包含在CSS中实现普遍非常高的计算复杂度。

来源

2015-04-06 02:37:25

根据输入检查更改CSS

回答

相关问题