根據輸入檢查更改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

回答

相關問題