基于复选框css更改页面样式

Question

我试图在我的页面中添加类似于“黑暗模式”的内容。我在网上找到了一个很好的切换开关，当点击激活复选框时，如何使用复选框的选中状态来更改我的css？

Html：

    <body>
    <div class="switch">
    <input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
    <label for="cmn-toggle-4"></label>
    </div>
    <div id= "lbox">
    </div>
    <div id="text1">
        <p>text</p>
    </div>
    <div id="text2">
        <p>text</p>
    </div>
</body>

我想要改变lbox的颜色和身体的背景色。我试过：

input.cmn-toggle-round-flat:checked + #lbox {
color:#ffffff;
}

这似乎只适用于更改css的切换部分，而不是在该部分之外。不管怎么说，我可以用纯css来完成这个任务吗?或者我需要使用javascript吗？谢谢。

Answer 1

Css用于造型..。如果您有一些逻辑，您必须调用Javascript先生(jQuery)；

这很容易。我只是做了个小片段。希望它能帮上忙

​

$(document).ready(function(){
  
  $('#cmn-toggle-4').click(function(){
    if($(this).is(":checked")){
      $('.wrap').css('background','black');
      $('p').css('color','white');
    }else {
      $('.wrap').css('background','white');
      $('p').css('color','black');
    }
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
    <div class="switch">
    <input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
    <label for="cmn-toggle-4"></label>
    </div>
    <div id= "lbox">
    </div>
    <div id="text1">
        <p>text</p>
    </div>
    <div id="text2">
        <p>text</p>
    </div>
</div>

​