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

Question

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

(例如:它在JavaScript中很简单)

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;
}

这使用相邻的兄弟选择器.

这是工作:http://jsfiddle.net/eYgdm/(我添加了*-user-select: none;以防止选择标签文本,但标签不需要工作)

浏览器支持

Chrome,Firefox [桌面和手机](Gecko)≥1.0,InternetExplorer≥7,Opera≥9和Safari≥3参考:属性选择器和相邻的同级选择器