Question

是否可以更改button点击的背景颜色;整个document，只使用CSS和HTML5？

Answer 1

基于我在评论中发布的小提琴我已经稍微修改了它以使用Bootstrap按钮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;
}

这使用adjacent sibling selector。

此处有效：http://jsfiddle.net/eYgdm/（我已添加*-user-select: none;以阻止选择标签文字，但标签无需工作）

浏览器支持

Chrome，Firefox [桌面＆amp;手机]（Gecko）≥1.0，InternetExplorer≥7，Opera≥9，Safari≥3 参考文献：Attribute selectors和Adjacent sibling selectors

Answer 2

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

<button class="btn">button</button>
<div class="content"></div>

btn:active + .content{
    background: blue;
}

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

Answer 3

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

Answer 4

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

Answer 5

你可以（ab？）使用：target选择器。这可能不适用于旧版浏览器。这是我做的一个非常简单的例子，它在点击链接时切换背景。

这个概念是将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

Answer 6

有一种方法可以做到：

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

：焦点基本上意味着当你点击具有cc2类的元素时，它会将它变为背景蓝色:)希望有所帮助。

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

6 个答案:

HTML

CSS

浏览器支持