单击按钮时更改背景，仅使用 CSS

Change background on button click, using CSS only?

本文关键字：CSS 背景 按钮 单击      更新时间：2023-09-26
是否可以在

单击button时更改整个document的背景颜色，仅使用CSS和HTML5？

（例如：这在 JavaScript 中是微不足道的）

根据我在评论中发布的小提琴，我对其进行了非常轻微的修改以使用引导按钮CSS。

只需包含 Bootstrap 的 CSS 文件，然后使用以下代码。

.HTML

<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div></div>

.CSS

div {
    width: 100%;
    height: 100%;
    background: #5CB85C;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
label.btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2; 
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"]:checked + div{
    background: #5BC0DE;
}

这使用相邻的同级选择器。

它在这里工作：http://jsfiddle.net/eYgdm/（我添加了*-user-select: none;以防止选择标签文本，但标签不需要它）

浏览器支持

Chrome、Firefox [Desktop & Mobile] （Gecko） ≥ 1.0、Internet Explorer ≥ 7、Opera ≥ 9 和 Safari ≥ 3参考：属性选择器和相邻同级选择器

你可以做这样的事情 - 使用相邻的css选择器：

<button class="btn">button</button>
<div class="content"></div>
btn:active + .content{
    background: blue;
}

http://jsfiddle.net/JeffreyTaylor/g47Uh/

不，CSS 中没有"点击然后做某事"的概念。

不幸的是，css 规则中没有回溯; 对于 css 选择器，没有办法爬上元素的祖先。

你可以（ab？）使用 ：目标选择器。这可能不适用于较旧的浏览器。这是我制作的一个超级简单的例子，它在单击链接时切换背景。

这个概念是将CSS样式应用于目标元素。在下面的代码中，单击链接将针对正文的 ID，该 ID 应用 body：target 中的样式（更改背景颜色）。

<html>
    <head>
        <style>
            body { background-color:#333; }
            body:target { background-color:#fff; }
        </style>
    </head>
    <body id="myBody">
        <a href="#myBody">Click</a>
    </body>
</html>

JSfiddle

有一种方法可以做到这一点：

.cc2:focus {
background-color: #19A3FF;}

：focus基本上意味着当你点击带有类cc2的元素时，它会把它的背景变成蓝色:)希望有帮助。

相关文章：