Question

我为网站的移动版本编写了一个页面，并且我想插入一个标签为Dark Theme的复选框，当用户选中此框时会将整个网站的背景颜色更改为黑色并且文字颜色为白色，我在互联网上发现了许多代码，但它不起作用，我不知道为什么。

例如我试过这个：

＆＃13;

#select1:checked ~ div .wrapper{
	background-color:black;
  color: white;
}

＆＃13;

<div class="wrapper">
<input id="select1" name="check1" type="checkbox" />
<label for="select1">Dark Theme</label>
</div>

＆＃13;

你能帮帮我吗？谢谢

Answer 1

此代码是更改背景颜色

的示例

GtkTreeIter       iter;
gboolean          iter_valid;

iter_valid = gtk_tree_model_get_iter_first(GTK_TREE_MODEL(store), &iter);
while (iter_valid)
{
  gtk_tree_model_get(GTK_TREE_MODEL(store), &iter, < add fields here >, -1);

  bool           update = FALSE;
  // Check if this entry needs to be updated
  // .... => set update = TRUE;

  if (update)
    gtk_tree_store_set(store, &iter, < field names and values here... > -1);

  iter_valid = gtk_tree_model_iter_next(GTK_TREE_MODEL(store), &iter);
}
// Optionally update filtering and sorting...

Jsfiddle

Answer 2

使用css

更改div背景颜色

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .wrapper{
        width:50px;
        height:50px;
        background-color:#000;
    }

    #select2:checked ~ .wrapper{
        background-color:#060;
    }

    #select3:checked ~ .wrapper{
        background-color:#0000FF;
    }
    </style>
    </head>

    <body>
            <input id="select1" name="check1" type="checkbox" checked />
            <label for="select1">Dark Theme</label>
        <input id="select2" name="check1" type="checkbox" />
            <label for="select2">Green Theme</label>
        <input id="select3" name="check1" type="checkbox" />
            <label for="select3">Blue Theme</label>

        <div class="wrapper"></div>

    </body>
    </html>

Answer 3

通过纯CSS获取它的唯一方法是以下代码段：

#select1:checked~div.wrapper {
  background-color: black;
  color: white;
}

<input id="select1" name="check1" type="checkbox" />
<label for="select1">Dark Theme</label>
<div class="wrapper">

  Some text here
</div>

注意：使用JS是实现预期目标的正确方法。

CSS用户更改背景颜色

3 个答案: